React + TS + Vite +Ant Design第二章

第二章 路由配置

1.创建router/index.tsx文件

import { Routes, Route } from 'react-router-dom'
import { lazy } from 'react'
// import Todo from '@/pages/todo'
const Todo = lazy(() => import('@/pages/Todo'))
const Home = lazy(() => import('@/pages/Home'))
function RootRoute(): JSX.Element {
  return (
    <>
      <Routes>
        <Route path="/" element={<Todo />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </>
  )
}

export default RootRoute

2. main.tsx文件

import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<BrowserRouter>
  <App />
</BrowserRouter>,
)

3. app.tsx文件里

import React, { Fragment } from 'react'
import RootRoute from './router'

const App: React.FC = () => {
return (
 <Fragment>
   <RootRoute />
 </Fragment>
)
}
export default App

路由就配置好啦。