React-Router-Dom-V6

前言：

​ 项目使用npx create-react-app my-app脚手架创建

安装

$ yarn add react-router-dom@6

修改src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
//BrowserRouter将<App />包裹
ReactDOM.render(
  <BrowserRouter> 
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

新建组件如下src/components

├── components
│   ├── Home
│   │   └── index.js
│   ├── Login
│   │   └── index.js
│   ├── NotFound
│   │   └── index.js
│   └── User
│       └── index.js

rfce快捷键修改每个（Login除外）index.js 如下

import React from 'react'
function index() {
  return (
    <div>这里填写组件名称</div>
  )
}
export default index

注意：嵌套路由需引用组件作为出口

/* src/components/Login/index.js */
import React from "react";
import { Outlet } from "react-router-dom";

function Login() {
  return (
    <>
      <div>父组件 Login</div>
      嵌套组件如下
      <Outlet />
    </>
  );
}

export default Login;

新建路由如下src/router

├── router
│   ├── loadable.js //懒加载 loader
│   ├── index.js //主文件 渲染组件
│   └── routes.js  //路由核心

index.js

/* src/router/index */
import { useRoutes } from 'react-router-dom';

// routes
import routes from '../router/routes';

// ==|| ROUTING RENDER 路由渲染 ||== //

export default function Routes() {
    return useRoutes(routes);
}

loadable.js

/* src/router/loadable */
import { Suspense } from "react";

// ==|| LOADABLE - LAZY LOADING ||== //

const Loadable = (Component) => (props) =>
  (
    <Suspense fallback={<div>loading...</div>}>
      <Component {...props} />
    </Suspense>
  );

export default Loadable;

routes.js

/* src/router/routes */

/* 懒加载方法 */
import { lazy } from "react";
/* app 布局 */
import Login from "../components/Login";
/* 引入Loadable为懒加载渲染组件 */
import Loadable from "./loadable";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

/* 懒加载的组件 */
const User = Loadable(lazy(() => import("../components/User")));
const Home = Loadable(lazy(() => import("../components/Home")));
const NotFound = Loadable(lazy(() => import("../components/NotFound")));

/* 重定向 V6版本方法 详情见底部附录 */
function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
}

const router = [
  {
    path: "/",
    element: <Login />,
    children: [
      {
        /* 嵌套索引index 嵌套下 <Outlet /> 默认加载该组件 */
        index: true,
        element: <Home />,
      },

      { path: "/user", element: <User /> },
    ],
  },
  { path: "/not", element: <NotFound /> },
  // 重定向
  { path: "/login", element: <Redirect to="/user" /> },

  // 404找不到
  { path: "*", element: <NotFound /> },
];


export default router;

修改app.js

import logo from "./logo.svg";
import "./App.css";
import Routes from "./router";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 引用渲染路由组件 */}
        <Routes />
      </header>
    </div>
  );
}

export default App;

附录：

源码地址：https://github.com/bingic/react-router-v6

router官网：https://reactrouter.com

重定向功能-V6：https://reactrouter.com/docs/en/v6/upgrading/reach#what-about-clicking-links-that-arent-updated