React-Router-V6

1. 写法对比

// v5
import { Switch, Route } from 'react-router-dom';

const User = ({ id }: { id: string }) => {
  return <div>user id: {id}</div>;
};

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user/:id" render={(route) => <User id={route.match.params.id} />} />
    </Switch>
  );
};

// v6
import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';


import { login } from '../../utils/AuthService';
import Common from '../../lib/Common';
import dataSet from '../../config/routerData'
import Login from '../login/login';
import ILayout from '../layout/layout';

const { getData } = Common;

const RoutesSelf = () => {
    const routeItems = dataSet.map((route: any) => <Route key={route.path}  path={route.path} element={route.component} />);
    return (
        <Routes>
            {routeItems}
        </Routes >
    );
};
const Index = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='*' element={<Navigate to='login' />} />
                <Route path='/home/*' element={<ILayout> {RoutesSelf()}</ILayout>}/>
                <Route path='/login' element={<Login />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Index;

2. 注意点
   1. component -->element（直接收组件）
   2. V6去掉了Switch， Routers 进行嵌套
   3. v6 Navigate 代替 Redirect 重定向
3. 路由嵌套

   1. 嵌套路由写法

       ```js
        <Route path='/home/*' element={
         <ILayout>
               <Routes>
                   <Route key={'about'}  path={route.path} element={route.component} />
                   <Route key={'author'}  path={route.path} element={route.component} />
                   <Route key={'list'}  path={route.path} element={route.component} />
               </Routes >
           </ILayout>}
        />
       ```
      

   2. 嵌套路由跳转 路由跳转， 父级路由必须是'/home/， “”结尾， 子路由前面没有路径

4. 编译出现的问题
   1. BrowserRouter 编译后容易出现路由刷新 unexpected token '<'，页面奔溃
   2. 上一篇文章有写如何解决