react路由表配置

目前项目中推荐使用路由表配置，进行路由的注册

安装路由插件库

第一步，我们需要在项目中安装路由插件

yarn add react-router-dom

全局路由器管理

以下文件是使用脚手架搭建的根目录下的index.js

src/index.js  

使用基于history模式的BrowserRouter包裹app组件；当然也可以使用HashRouter包裹（哈希路由）

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

路由表

我们在项目开发中，并不会把路由表混乱的写在页面中，所以推荐放到统一的文件中进行管理

其中我们也要使用懒加载lazy和当网络异常时的回调组件方式Suspense

例如：src/routes/index.js

/* eslint-disable import/no-anonymous-default-export */
import React, { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";
import NotFound from "../pages/NotFound";
function lazyLoad(path) {
  const Comp = lazy(() => import("../pages/homepage/components/" + path));
  return (
    <Suspense fallback={<div>加载中……</div>}>
      <Comp />
    </Suspense>
  );
}

export default [
  {
    path: "/about",
    element: lazyLoad("About"),
  },
  {
    path: "/home",
    element: lazyLoad("Home"),
    children: [
      {
        path: "news",
        element: lazyLoad("News"),
      },
      {
        path: "message",
        element: lazyLoad("Message"),
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
  {
    path: "*",
    element: <NotFound />,
  },
];

注册路由

使用useRoutes进行注册，在使用路由导航的页面中进行注册

import React, { Fragment } from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "../../routes";

import "./index.css";
export default function Homepage() {
  function classNameActive({ isActive }) {
    return isActive ? "nav blue" : "nav";
  }
  const element = useRoutes(routes);
  return (
    <Fragment>
      <NavLink className={classNameActive} to="./about">
        about
      </NavLink>
      <br />
      <NavLink className={classNameActive} to="./home">
        home
      </NavLink>
      <br />
      {element}
    </Fragment>
  );
}

挂载二级路由对应的页面内容

一级路由呈现二级路由的内容需要通过引入Outlet组件进行挂载位置 

  import React, { Fragment } from "react";
import { Outlet, NavLink } from "react-router-dom";

export default function index() {
  return (
    <Fragment>
      home组件
      <hr />
      <NavLink to="news">News</NavLink>
      <br />
      <NavLink to="message">Messagee</NavLink>
      //指定路由组件内容呈现的位置
      <Outlet />
    </Fragment>
  );
}