react-router V6路由

安装了下react-router-dom,然后使用的时候突然发现一直在报错。一度以为是自己写错了。找了半天发现写的没有问题跟之前写法一样，然后就看了下版本发现是V6版本。。。

V6和V5版本改动非常的大。

1. <Switch>重命名为<Routes>。

   <Route>的新特性变更。

   嵌套路由变得更简单。

   用useNavigate代替useHistory。

   新钩子useRoutes代替react-router-config。

   大小减少：从20kb到8kb

   1. <Switch>重命名为<Routes>

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

import Layouts from "@/Layouts";
import About from "@/pages/About";
import Dashboard from "@/pages/Dashboard";
import Home from "@/pages/Home";
import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";
export default function RouterBox() {
  return (
    <Router>
     
        <Routes>
          <Route  path="/"  element={<Layouts/>}>
           
          </Route>
          <Route path="/about" index element={<About/>}/>
         
         
          <Route path="/dashboard"  element={<Dashboard/>}>
       
          </Route>
        </Routes>

    </Router>
  );
}

2.<Route>的新特性变更

component/render被element替代

3.1 简化嵌套路由定义

v5中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑（活久见啊，终于意识到这个问题了。）

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

3.2 新API:Outlet

这玩意儿，像极了{this.props.children}，具体用法看以下例子：

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}

3.3 多个<Routes />

以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';
import { Routes, Route } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

4. 用useNavigate代替useHistory

从一目了然改到双目失明。。。

总感觉React Router团队有点儿戏。。。

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
// v5
history.push('/home');
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});

5. 新钩子useRoutes代替react-router-config。

import Layouts from '@/Layouts';
import About from '@/pages/About';
import Dashboard from '@/pages/Dashboard';
import Home from '@/pages/Home';
import NoMatch from '@/pages/NoMatch';
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, RouteObject, useRoutes } from 'react-router-dom';

 let routes: RouteObject[] = [
    {
        path: '/',
        element: <Layouts />,
        children: [
            { index: true, element: <Home /> },
            { path: '/About', element: <About />, },
            { path: '/dashboard', element: <Dashboard />, },
            { path: '*', element: <NoMatch /> },
        ],
    },
];

 export  const AppRoute=()=>{
    let element = useRoutes(routes);
   
    return element;
 }
 
import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useRoutes,
} from "react-router-dom";
import {AppRoute} from '@/router/demo' 
 
 const AppWrapper = () => {
  return (
    <Router>
      <AppRoute />
    </Router>
  );
};

参考链接：https://reactrouter.com/docs/en/v6/getting-started/tutorial