React路由配置

一、分离式的路由配置

useRoutes

Hook====useRoutes 让我们可以完成类似于vue一样的配置式路由

1、不用路由懒加载

(1)、创建路由配置文件：

./routes/index.js

import { Navigate } from "react-router-dom";
import Goods from "../views/Goods/Goods.jsx";
import Home from "../views/Home.jsx";
import User from "../views/User.jsx";
import Detail from "../views/Goods/Detail.jsx";
import Comment from "../views/Goods/Comment.jsx";

const routes = [
  {
    path: "/",
    element: <Navigate to="/Home" />,
  },
  {
    path: "/Home",
    element: <Home></Home>,
  },
  {
    path: "/User",
    element: <User></User>,
  },
  {
    path: "/Goods",
    element: <Goods></Goods>,
    children: [
        {
          path: "Detail",
          element: <Detail></Detail>,
        },
        {
          path: "Comment",
          element: <Comment></Comment>
        }
    ],
  },
];

export default routes;

(2)、根组件的代码：

使用 useRoutes

import './App.css';
import {Link, useRoutes } from "react-router-dom";
import routes from './routes';

function App() {
  return(
    <>
        <span>
         <Link to="/Home"> 首页</Link>
          </span>&nbsp;&nbsp;|&nbsp;&nbsp;
        <span>
         <Link to="/User"> 用户</Link>
          </span>&nbsp;&nbsp;|&nbsp;&nbsp;
        <span>
         <Link to="/Goods"> 商品</Link>
          </span>&nbsp;&nbsp;|&nbsp;&nbsp;
        <hr/>
      
        { useRoutes(routes)}

    </>
  )
}

export default App;

(3)、入口文件的代码：

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

(4)、Goods组件的代码：二级路由

使用路由出口 Outlet

./views/Goods.js

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

export default function Goods() {
  return (
    <>
      <div>商品页面</div>
      <span>
        <Link to="/Goods/Detail"> 详情</Link>
      </span>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <span>
        <Link to="/Goods/Comment"> 评论</Link>
      </span>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <hr></hr>
      <Outlet></Outlet>
    </>
  );
}

路由懒加载---扩展

1. 修改引用方式 lazy()按需引用

// 1.修改引用方式 使用lazy方法引用
// import Home from "../views/Home.jsx"
const Home=React.lazy(()=> import ("../views/Home.jsx"))

2.修改调用方式 Suspense 懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。提示等待信息（有可能加载速度很快看不见等待提示）

{/* <Route path="/home" element={<Home/>}> */}
                {/* 2修改使用方式 */}
<Route path="/home" element={<React.Suspense fallback={<>请稍等。。</>}> <Home/></React.Suspense>}>

 但是如果一个个都这样写太麻烦了 我们可以封装一下

let lazyload=(path)=>{
  let Com=React.lazy(()=> import (`../views/${path}`))
  return (
    <React.Suspense fallback={<>请等待·····</>}>
      <Com/>
    </React.Suspense>
  )
} 

使用

 <Route path="/home" element={lazyload("Home")}>

2、使用路由懒加载

在上一步的路由配置文件中使用 React.Lazy()函数，并把组件用<React.Suspense>包裹。

import React from "react";
import {Navigate} from "react-router-dom";

let lazyload=(path)=>{
    let Com=React.lazy(()=>{return import (`../views/${path}`)})
    return (
      <React.Suspense fallback={<>请等待·····</>}>
        <Com/>
      </React.Suspense>
    )
  } 

export default [
    {
        path:"/",
        element:<Navigate to="/home"/>
    },
    {
        path:"/home",
        element:lazyload("Home/Home"),
        children:[
            {
                path:"Son01",
                element:lazyload("Home/Son01")
            },
            {
                path:"Son02",
                element:lazyload("Home/Son02")
            }
        ]      
    },
    {
        path:"/Shop",
        element:lazyload("Shop")
    },
    {
        path:"/Phone2",
        element:lazyload("Phone")
    }
]