数控车床系统启动密码

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

// v6

<Route path="/" element={} />
<Route path=“profile/*” element={} />

复制代码2. 的新特性变更
component/render被element替代
总而言之，简而言之。就是变得更好用了。
import Profile from ‘./Profile’;

// v5

<Route
path=":userId"
render={routeProps => (

)}
/>

// v6
<Route path=":userId" element={} />
<Route path=":userId" element={} />
复制代码3. 嵌套路由变得更简单
具体变化有以下：

已更改为接受子路由。
比和更简单的匹配规则。
路径层次更清晰。

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

且看之前的处理：
// v5
import {
BrowserRouter,
Switch,
Route,
Link,
useRouteMatch
} from ‘react-router-dom’;

function App() {
return (






);
}

function Profile() {
let { path, url } = useRouteMatch();

return (

<Link to={ ${url}/me}>My Profile

  <Switch>
    <Route path={`${path}/me`}>
      <MyProfile />
    </Route>
    <Route path={`${path}/:id`}>
      <OthersProfile />
    </Route>
  </Switch>
</div>

);
}
复制代码而在v6中，你可以删除字符串匹配逻辑。不需要任何useRouteMatch()！
// v6
import {
BrowserRouter,
Routes,
Route,
Link,
Outlet
} from ‘react-router-dom’;

扫描二维码关注公众号，回复： 9939784 查看本文章

function App() {
return (


<Route path="/" element={} />
<Route path=“profile/*” element={} />


);
}

function Profile() {
return (

My Profile

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

);
}
复制代码当然，还有更酸爽的操作，直接在路由里定义的，然后用接下来的一个新API：Outlet
3.2 新API:Outlet
这玩意儿，像极了{this.props.children}，具体用法看以下例子：
function App() {
return (


<Route path="/" element={} />
<Route path=“profile” element={}>
<Route path=":id" element={} />
<Route path=“me” element={} />



);
}

function Profile() {
return (

My Profile

{/*
将直接根据上面定义的不同路由参数，渲染或
*/}

)
}
复制代码3.3 多个
以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。
import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;

function Dashboard() {
return (

Look, more routes!

<Route path="/" element={} />
<Route path=“invoices” element={} />

);
}

function App() {
return (

<Route path="/" element={} />
<Route path=“dashboard/*” element={} />

);
}
复制代码4. 用useNavigate代替useHistory
从一目了然改到双目失明。。。
总感觉React Router团队有点儿戏。。。
// v5
import { useHistory } from ‘react-router-dom’;

function MyButton() {
let history = useHistory();
function handleClick() {
history.push(’/home’);
};
return Submit;
};
复制代码现在，history.push()将替换为navigation()：
// v6
import { useNavigate } from ‘react-router-dom’;

function MyButton() {
let navigate = useNavigate();
function handleClick() {
navigate(’/home’);
};
return Submit;
};
复制代码history的用法也将被替换成：
// v5
history.push(’/home’);
history.replace(’/home’);

// v6
navigate(’/home’);
navigate(’/home’, {replace: true});
复制代码
5. 新钩子useRoutes代替react-router-config。
感觉又是一波强行hooks，但还是相对于之前简洁了一些。。。
function App() {
let element = useRoutes([
{ path: ‘/’, element: },
{ path: ‘dashboard’, element: },
{ path: ‘invoices’,
element: ,
children: [
{ path: ‘:id’, element: },
{ path: ‘sent’, element: }
]
},
// 重定向
{ path: ‘home’, redirectTo: ‘/’ },
// 404找不到
{ path: ‘*’, element: }
]);
return element;
}
复制代码6. 大小减少：从20kb到8kb
React Router v6给我们带来方便的同时，还把包减少了一半以上的体积。。。

感觉可以去看一波源码了。。。

7. 迁移及其它重要修复…
   官方的迁移指南在这里：React Router v6迁移指南
   其实上面所列的新特性，基本就是迁移的全部内容了。
   基础的起手式就是更新包：
   $ npm install react-router@6 react-router-dom@6

or, for a React Native app

$ npm install react-router@6 react-router-native@6
复制代码其中我觉得特别需要注意的一点是：React Router v6使用简化的路径格，仅支持2种占位符：动态:id样式参数和通配符
以下都是v6中的有效路由路径：
/groups
/groups/admin
/users/:id
/users/:id/messages
/files/
/files/:id/*
/files-*
复制代码使用RegExp正则匹配的路径将无效：
/users/:id?
/tweets/:id(\d+)
/files/*/cat.jpg
复制代码v6中的所有路径匹配都将忽略URL上的尾部"/"。实际上，已被删除并且在v6中无效。这并不意味着您不需要使用斜杠。
在v5版本之前的路径，存在路由歧义

当前路径:"/users"，则将跳转。
当前路径:"/users/"，则将跳转。

React Router v6修复了这种歧义，取消了尾部"/"：

当前路径:"/users"，则将跳转。
当前路径:"/users"，则将跳转。

其形式更像命令行cd的用法：
// 当前路径为 /app/dashboard

// // // //

// 命令行当前路径为 /app/dashboard
cd stats // pwd is /app/dashboard/stats
cd …/stats // pwd is /app/stats
cd …/…/stats // pwd is /stats
cd …/…/…/stats // pwd is /stats