四十六----react路由

chujinmaolu

已于 2023-12-19 22:21:05 修改

阅读量120

点赞数

文章标签： react.js javascript 前端

于 2023-12-16 19:48:45 首次发布

本文链接：https://blog.csdn.net/chujinmaolu/article/details/134960692

版权

本文详细介绍了React路由的使用，包括config+hooks的配置方法、页面跳转和鉴权处理。此外，探讨了React-router与vue-router的区别，涉及路由类型、使用方式和实现差异。还介绍了React-router的懒加载实现和history模式的处理方式。

摘要由CSDN通过智能技术生成

一、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={