react之react-router v6

项目中需要安装对应的react-router-dom包:

yarn add react-router-dom

在项目下建立一个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 />,
        // 设置子路由
        children: [
            {path: "add", element: <UserAdd />},
            {path: "profile", element: <UserProfile/>}
        ]
    },
    { path: "/about", element: <About /> },
    // 如果没有匹配到任何路由，就跳转根目录(或者404页面)， 类似于重定向
    { path: "*", element: <Navigate to="/" /> },
]
export default routes

需要使用useRouts这个函数去调用路由数组：

import { useRoutes } from 'react-router-dom';
import routes from "./routes";

function App() {
  // 调用路由数组
  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="/">首页</Link></li>
      <li><Link to="/user">用户管理</Link></li>
      <li><Link to="/about">关于</Link></li>
    </ul>
    
    {/* 此处传入返回路由的组件 */}
    <App />
  </Router>,
  document.getElementById('root')
);

在对应的需要使用子路由的User.jsx下传入<Outlet />组件：

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function User() {
    return (
        <div>
            <h1>用户</h1>
            <ul>
                <li><Link to="profile">用户信息</Link></li>
                <li><Link to="add" >添加用户</Link></li>
            </ul>
            {/* 插座，匹配路由，插入对应的路由 */}
            <Outlet />
        </div>
    )
}

这样就完成了一个简单的二级路由的使用