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

安装路由插件库

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

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>
  );
}

拓展：

react-router-dom的作用？

react-router-dom是React Router库的DOM绑定版本，它提供了React Router在浏览器环境中的实现。

React Router是一个用于构建单页面应用（SPA）的路由库，它允许你在应用程序中定义多个路由，并根据URL的变化来显示不同的组件。react-router-dom提供了React Router在浏览器环境中的实现，包括以下功能：

1. 路由：react-router-dom提供了<BrowserRouter>和<HashRouter>组件，用于定义路由。你可以使用<Route>组件来定义每个路由的路径和对应的组件。

2. 导航：react-router-dom提供了useNavigate和useHistory钩子，用于在组件中导航到不同的路由。你可以使用useParams和useLocation钩子来获取路由参数和当前路由的信息。

3. 链接：react-router-dom提供了<Link>和<NavLink>组件，用于在应用程序中创建链接。这些链接可以导航到不同的路由，并自动更新URL。

4. 路由守卫：react-router-dom提供了usePrompt和useBlocker钩子，用于在导航到新路由之前执行一些逻辑，如验证用户身份、检查页面权限等。

总的来说，react-router-dom是React Router库在浏览器环境中的实现，它提供了构建SPA所需的路由、导航、链接和路由守卫等功能。 

react是单页面应用吗？

是的，React可以用于构建单页面应用（SPA）。单页面应用（SPA）是一种Web应用模型，它在一个页面加载后，通过JavaScript动态更新页面内容，而不是每次请求都重新加载整个页面。

React是一个用于构建用户界面的JavaScript库，它提供了组件化的方式来构建用户界面。React可以与路由库（如React Router）结合使用，以实现SPA的路由功能。当用户导航到不同的URL时，React Router可以动态地更新页面内容，而不需要重新加载整个页面。

React的虚拟DOM和组件化特性使得它非常适合构建SPA。虚拟DOM可以高效地更新页面内容，而组件化可以使得代码更加模块化和可维护。

总的来说，React可以用于构建单页面应用，它提供了一种高效、灵活的方式来构建用户界面。

react的路由守卫？

React的路由守卫（Route Guards）是一种用于控制页面访问的机制。它允许你在用户尝试访问某个页面之前，执行一些逻辑，如验证用户身份、检查页面权限等。

React的路由守卫通常与路由库（如React Router）结合使用。React Router提供了一些钩子（Hooks），如useNavigate和useLocation，可以用于在组件中执行路由守卫逻辑。

以下是一个简单的示例：

import { useNavigate, useLocation } from 'react-router-dom';

function PrivateRoute() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const isAuthenticated = checkAuthentication(); // 检查用户是否已认证

    if (!isAuthenticated) {
      navigate('/login', { state: { from: location } }); // 如果用户未认证，导航到登录页面
    }
  }, [location, navigate]);

  return <div>Private Route</div>;
}

在上面的示例中，PrivateRoute组件是一个路由守卫。它使用useEffect钩子来监听路由的变化，并在路由变化时执行一些逻辑。如果用户未认证，它将导航到登录页面。

总的来说，React的路由守卫是一种用于控制页面访问的机制，它允许你在用户尝试访问某个页面之前，执行一些逻辑。React的路由守卫通常与路由库结合使用，并使用钩子来执行路由守卫逻辑。

react里我们为什么要配置路由表？

在React中，配置路由表是一种常见的做法，它用于定义应用程序中的路由和对应的组件。以下是配置路由表的一些主要原因：

1. 页面导航：路由表定义了应用程序中的页面和对应的URL路径。当用户导航到不同的URL时，React Router可以根据路由表来显示不同的页面。

2. 组件复用：路由表允许你在不同的URL路径下复用相同的组件。例如，你可能有一个<UserProfile>组件，你可以在多个路由中使用这个组件，而不需要为每个路由创建一个新的组件。

3. 代码组织：路由表可以帮助你更好地组织代码。你可以将相关的路由和组件放在同一个文件或文件夹中，使得代码更加清晰和可维护。

4. 权限控制：路由表可以用于实现权限控制。例如，你可能需要根据用户的角色来决定他们可以访问哪些页面。你可以使用路由表来定义这些权限，并在路由守卫中检查这些权限。

5. SEO优化：路由表可以帮助你优化SEO。你可以为每个页面定义一个唯一的URL，并使用React Router的<Link>组件来创建这些链接。搜索引擎可以更好地索引这些链接，并提高你的网站的排名。

总的来说，配置路由表是一种常见的做法，它可以帮助你更好地组织代码、实现页面导航、组件复用、权限控制和SEO优化。

 配置路由表相对于动态组件的区别？

配置路由表和动态组件都是用于在React应用程序中导航和显示不同页面的方法，但它们有一些关键的区别：

1. 静态性：配置路由表是一种静态的方法，它定义了一组固定的路由和对应的组件。而动态组件是一种动态的方法，它根据某些条件（如URL参数、用户身份等）来决定显示哪个组件。

2. 可维护性：配置路由表通常更容易维护，因为路由和组件是分开定义的。而动态组件可能需要将逻辑和组件混合在一起，这使得代码更加复杂和难以维护。

3. 灵活性：动态组件通常更灵活，因为它们可以根据不同的条件来决定显示哪个组件。而配置路由表可能不够灵活，因为它只能定义一组固定的路由和组件。

4. 性能：配置路由表通常性能更好，因为路由和组件是预先定义的，React Router可以快速地找到对应的组件。而动态组件可能需要计算和查找组件，这可能会增加一些性能开销。

总的来说，选择配置路由表还是动态组件取决于你的具体需求。如果你需要定义一组固定的路由和组件，并且不需要根据条件来决定显示哪个组件，那么配置路由表可能是一个更好的选择。如果你需要根据条件来决定显示哪个组件，或者你的应用程序需要动态加载组件，那么动态组件可能是一个更好的选择。 

react里路由跳转的原理？

在React中，路由跳转通常通过React Router库来实现。React Router是一个用于构建单页面应用（SPA）的路由库，它允许你在应用程序中定义多个路由，并根据URL的变化来显示不同的组件。

React Router的路由跳转原理如下：

1. 定义路由：首先，你需要在应用程序中定义路由。你可以使用<BrowserRouter>或<HashRouter>组件来定义路由。然后，你可以使用<Route>组件来定义每个路由的路径和对应的组件。

2. 监听URL变化：React Router使用history库来监听URL的变化。当用户导航到不同的URL时，history库会触发一个事件，通知React Router URL已经改变。

3. 匹配路由：React Router会根据URL的变化来匹配对应的路由。它会遍历所有的路由，找到与当前URL路径匹配的路由。

4. 渲染组件：一旦找到匹配的路由，React Router会渲染对应的组件。它会将路由参数和当前路由的信息作为props传递给组件。

5. 更新UI：React Router会使用React的虚拟DOM来更新UI。它会比较新的组件和旧的组件，并计算出最小的更新操作，然后更新DOM。

总的来说，React Router的路由跳转原理是基于URL的变化来匹配和渲染对应的组件。它使用history库来监听URL的变化，并使用React的虚拟DOM来更新UI。