创建项目
通过vite工具来构建react项目
npm create vite
然后按步骤输入项目名称(react-vite-app)
选择React、选择Typescript
运行项目
cd react-vite-app
npm i
npm run dev
运行结果
安装路由依赖
react-router-dom
路由(一)
通过 Link组件切换路由,注意Link组件需要在Router组件内部使用
App.tsx
import Home from './pages/home'
import About from './pages/about'
import "./App.css"
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
function App() {
return (
<Router>
<div className='nav_list'>
<div className='nav_item'> <Link to="/">Home</Link> </div>
<div className='nav_item'> <Link to="/about">About</Link> </div>
</div>
<Routes>
<Route path='/' element={<Home></Home>}></Route>
<Route path='/about' element={<About></About>}></Route>
</Routes>
</Router>
)
}
export default App
路由(二)
在main.tsx页面,通过createBrowserRouter方法创建路由,再传入RouterProvider组件中
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import Home from './pages/home'
import About from './pages/about'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: '',
element: <Home />,
}, {
path: 'about',
element: <About />,
}
]
}
])
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>,
)
在App.tsx页面中通过Outlet组件展示路由页面
App.tsx
import "./App.css"
import { Outlet, useNavigate, Link } from 'react-router-dom'
function App() {
const navigate = useNavigate()
const handleNavClick = (path: string) => {
navigate(path)
}
return (
<>
{/* 通过点击调用navigate方法切换 */}
<div className='nav_list'>
<div className='nav_item'> <button onClick={() => handleNavClick('/')}>Home</button> </div>
<div className='nav_item'> <button onClick={() => handleNavClick('/about')}>About</button> </div>
</div>
{/* link组件切换路由 */}
<div className='nav_list'>
<div className='nav_item'> <Link to="/">Home</Link> </div>
<div className='nav_item'> <Link to="/about">About</Link> </div>
</div>
<Outlet></Outlet>
</>
)
}
export default App
抽离路由表
src目录下新建router目录,并进入router新建index.tsx文件
/router/index.tsx
import React, { ComponentType } from 'react'
import { createBrowserRouter } from "react-router-dom";
import App from '../App.tsx'
// import Home from "../pages/Home";
import About from "../pages/About";
// 懒加载
const load = (Com: ComponentType) => <React.Suspense fallback={<div>Loading...</div>}><Com></Com></React.Suspense>
const router = createBrowserRouter([
{
path: "/",
element: <App />,
errorElement: '',
children: [
{
path: '',
element: load(React.lazy(() => import('../pages/Home')))
},
{
path: 'about',
element: <About></About>
}
]
}
])
export default router
main.tsx页面引入router并使用
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router/index.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>,
)
运行结果