一、react 路由使用

import { render } from "react-dom";
import {BrowserRouter,Routes,Route,
} from "react-router-dom";
// import your route components too
render(<BrowserRouter><Routes><Route path="/" element={<App />}><Route index element={<Home />} /><Route path="teams" element={<Teams />}><Route path=":teamId" element={<Team />} /><Route path="new" element={<NewTeamForm />} /><Route index element={<LeagueStandings />} /></Route></Route></Routes></BrowserRouter>,document.getElementById("root")
);

config+hooks用法

import { render } from "react-dom";
import { useRoutes, BrowserRouter } from 'react-router-dom'
function Routes() {return useRoutes([{path: '/',element: <App>,children: [{path: '/,element: <Home />,},{path: '/teams',element: <Teams />children: [{path: ':tamId',element: <Team />}]}]},])
}
render(<BrowserRouter><Routes /></BowserRouter>,document.getElementById("root")）如果是自路由则用<Outlet>占位

页面跳转

<Link to="/">To</Link>
<Navigate to="/login">To</Link>

hooks用法

const location = useLocation()
location.push("/")const navigate = useNavigate();
navigate.push("/")

二、路由鉴权及跳转拦截
1、路由配置里带权限需求
route.js

import { useRoutes } from "react-router"
import { RequireAuth } from "./auth"
import Layout from "./layouts/Layout"
import About from "./pages/About"
import Account from "./pages/Account"
import Home from "./pages/Home"
import Login from "./pages/Login"
import Logout from "./pages/Logout"export const routes = [{path: '/',name: '首页',element: <Home />,nav: true,},{path: '/about',name: '关于我们',element: <About />,nav: true,},{path: '/login',name: '登录',element: <Login />,},{path: '/logout',name: '退出登录',element: <Logout />},{path: '/account',name: '我的账户',element: <Account />,auth: true,nav: true,}
]function Routes () {const r = useRoutes([{path: '/',element: <Layout />,children: routes.map(e => {if (e.auth) {e.element = (<RequireAuth>{e.element}</RequireAuth>)}return e;}),}]);return r;
}export default Routes;

main.js

import * as React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";
import "./index.css";
import { AuthProvider } from "./auth";ReactDOM.hydrate(<React.StrictMode><AuthProvider><BrowserRouter><Routes /></BrowserRouter></AuthProvider></React.StrictMode>,document.getElementById("root")
);
//或者

或者直接在界面编写路由，这种需要在具体组件里鉴权
使用React.lazy可以实现组件/路由懒加载，懒加载可以使得代码切割打包分开，使得首次加载的包体积变小。

import * as React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "./auth";
import "./index.css";
import Layout from "./layouts/Layout";
import Home from "./pages/Home";
import Login from "./pages/Login";const Account = React.lazy(() => import("./pages/Account"));ReactDOM.hydrate(<React.StrictMode><AuthProvider><BrowserRouter><Routes><Route path="/" element={<Layout />}><Route path="/" element={<Home />} /><Route path="/account" element={