create-react-app 基於ts項目，使用react-router-dom搭建項目

准備工作

• 來個react項目 create-react-app 基於TS的項目
• ts項目安裝后 刪除node_modules，重新 yarn install， 不然jsx會報錯
• 安裝React-router-dom

yarn add react-router-dom
npm install --save react-router-dom

npm i --save-dev @types/react-router-dom 

React-router-dom + React-router 功能對比

React-router

實現了路由的核心功能

React-router-dom

基於React-router，加入了一些在瀏覽器運行下的一些功能，

• Link組件會渲染一個a標簽，
• BrowserRouter使用 HTML5 提供的 history API可以保證你的 UI 界面和 URL 保持同步，
• HashRouter使用 URL 的 hash 部分保證你的 UI 界面和 URL 保持同步

開始搭建

創建routers文件夾

創建pages文件夾（放所有的頁面）

寫的第一個頁面

導出所有頁面

// 路由懶加載
import { lazy } from 'react'

const Home = lazy(() => import('./home'))

export {
  Home
}

配置路由

import {
  Home,
} from '../pages'

export type RouterType = {
  path: string,
  component: React.LazyExoticComponent<any>,
  root: string[],
  notExect?: boolean,
}

const HomeRouter: RouterType = {
  path: '/home',
  component: Home,
  root: [],
}
// 總路由
const Routers: RouterType[] = ([
  HomeRouter,
])

export {
  Routers
}

配置index.tsx

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    {/* 使用了路由懶加載，所以需要使用<Suspense>包起來 */}
    <Suspense fallback={<div></div>}>
      <Switch>
        <Route path="/" render={routerProps => {
          return <App {...routerProps}/>
        }}/>
      </Switch>
    </Suspense>
  </BrowserRouter>,
  document.getElementById('root')
)

配置App.tsx

import React from 'react'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import { Home } from './pages'
import { Routers } from './routers'
function App () {
  return (
      <Switch>
        {
          Routers.map(router => (
            <Route
              exact={!router.notExect}
              key={router.path}
              path={router.path}
              component={router.component}
            >
            </Route>
          ))
        }
        {/* 設置默認路由 推薦方法一*/}
        {/* 方法一 */}
        {/* <Route path="/" component={Home} exact></Route> */}
        {/* 方法二 重定向*/}
        <Redirect path="/" to="/home" />
      </Switch>
  )
}

export default withRouter(App)

多個路由文件怎么辦？

pages的index.ts增加引入

routers下新增base.ts文件

routers下index.ts增加引入

多路由文件配置完成

結尾
本人react也是在學習中，有問題可以在下方評論，我看見了會回復