項(xiàng)目中需要安裝對(duì)應(yīng)的react-router-dom包:
yarn add react-router-dom
在項(xiàng)目下建立一個(gè)routes.jsx的文件屠阻，用于配置路由：
import { Navigate } from 'react-router-dom';
import Home from './Home';
import User from './User';
import About from './About';
import UserAdd from './UserAdd';
import UserProfile from './UserProfile';
// 抽取routes
const routes = [
{ path: "/", element: <Home /> },
{
path: "/user/*",
element: <User />,
// 設(shè)置子路由
children: [
{path: "add", element: <UserAdd />},
{path: "profile", element: <UserProfile/>}
]
},
{ path: "/about", element: <About /> },
// 如果沒(méi)有匹配到任何路由，就跳轉(zhuǎn)根目錄(或者404頁(yè)面)劣光， 類(lèi)似于重定向
{ path: "*", element: <Navigate to="/" /> },
]
export default routes
需要使用useRouts這個(gè)函數(shù)去調(diào)用路由數(shù)組：
import { useRoutes } from 'react-router-dom';
import routes from "./routes";
function App() {
// 調(diào)用路由數(shù)組
return useRoutes(routes)
}
export default App;
在index.js中傳入<App />組件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter as Router, Link} from 'react-router-dom'
ReactDOM.render(
<Router>
<ul>
<li><Link to="/">首頁(yè)</Link></li>
<li><Link to="/user">用戶(hù)管理</Link></li>
<li><Link to="/about">關(guān)于</Link></li>
</ul>
{/* 此處傳入返回路由的組件 */}
<App />
</Router>,
document.getElementById('root')
);
在對(duì)應(yīng)的需要使用子路由的User.jsx下傳入<Outlet />組件：
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
export default function User() {
return (
<div>
<h1>用戶(hù)</h1>
<ul>
<li><Link to="profile">用戶(hù)信息</Link></li>
<li><Link to="add" >添加用戶(hù)</Link></li>
</ul>
{/* 插座野崇，匹配路由称开，插入對(duì)應(yīng)的路由 */}
<Outlet />
</div>
)
}
這樣就完成了一個(gè)簡(jiǎn)單的二級(jí)路由的使用
