以下是使用npm安装React Router v6的命令:
npm install react-router-dom@next
安装完成后,就可以开始在React应用程序中使用React Router v6了。
import { Route } from 'react-router-dom';
function App() { return ( <div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div> );}
在这个例子中,我们定义了三个路由:“/”,“/about”和“/contact”。每个路由都有一个对应的组件,当用户访问这个路由时,就会渲染这个组件。
2. 导航到不同的路由要导航到不同的路由,可以使用“Link”组件。以下是一个简单的例子:
import { Link } from 'react-router-dom';function App() { return ( <div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div> );}
在这个例子中,我们使用“Link”组件来创建一个导航菜单。当用户点击菜单项时,就会导航到对应的路由。
3. 使用嵌套路由React Router v6支持嵌套路由,这使得React应用程序可以更加灵活和可扩展。以下是一个嵌套路由的例子:
import { Route, Routes } from 'react-router-dom';function App() { return ( <div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />}>
<Route path="history" element={<History />} />
<Route path="team" element={<Team />} /> </Route>
<Route path="/contact" element={<Contact />} />
</Routes>
</div> );}
在这个例子中,我们使用“Routes”组件来定义嵌套路由。在“/about”路由下,我们定义了两个子路由:“/about/history”和“/about/team”。当用户访问这些路由时,就会渲染对应的组件。
import type { FC } from 'react'
import type { RouteObject } from 'react-router'
import { lazy } from 'react'
import { Navigate, useRoutes } from 'react-router-dom'
import LoginPage from '../views/login'
import LayoutPage from '../views/layout'
import Dashboard from '../views/dashboard'
const AnswerPage = lazy(() => import(/* webpackChunkName: "answer'"*/ '../views/answer'))
const VideoPage = lazy(() => import(/* webpackChunkName: "videoPage'"*/ '../views/videoPage'))
const MyPage = lazy(() => import(/* webpackChunkName: "my'"*/ '../views/my'))
const routeList: RouteObject[] = [
{
path: '/login',
element: <LoginPage />
},
{
path: '/',
element: <LayoutPage />,
children: [
{
path: '',
element: <Navigate to='dashboard' />
},
{
path: 'dashboard',
element: <Dashboard />
},
{
path: 'answer',
element: <AnswerPage />
},
{
path: 'videoPage',
element: <VideoPage />
},
{
path: 'my',
element: <MyPage />
}
]
}
]
const RenderRouter: FC = () => {
const element = useRoutes(routeList)
return element
}
export default RenderRouter
import React, { Suspense } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import RenderRouter from './routes'
import { DotLoading } from 'antd-mobile'
function App () {
return (
<Router>
<Suspense fallback={<DotLoading />}>
<RenderRouter></RenderRouter>
</Suspense>
</Router>
)
}
export default App
它提供了许多新的特性和改进,包括改进的导航功能、改进的路由匹配、改进的代码分割和改进的嵌套路由。在React应用程序中使用React Router v6非常简单,只需要定义路由和使用“Link”组件来导航到不同的路由。如果需要使用嵌套路由,可以使用“Routes”组件来定义它们。