React-Router v6

总结为6点变化：
重命名为。
的新特性变更。
嵌套路由变得更简单。
用useNavigate代替useHistory。
新钩子useRoutes代替react-router-config。
大小减少：从20kb到8kb

1. 重命名为

顶级组件将被重命名。但是，其功能大部分保持不变

// v5

// v6

} />
} />

复制代码

1. 的新特性变更

component/render被element替代

总而言之，简而言之。就是变得更好用了。

import Profile from './Profile';
// v5

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

)}
/>

// v6
} />
} />
复制代码

1. 嵌套路由变得更简单

具体变化有以下：

已更改为接受子路由。
比和更简单的匹配规则。
路径层次更清晰。
3.1 简化嵌套路由定义
v5中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑

且看之前的处理：

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

function App() {
return (

<Route exact path="/" component={Home} />
<Route path="/profile" component={Profile} />

);
}

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

return (

);
}
复制代码
而在v6中，你可以删除字符串匹配逻辑。不需要任何useRouteMatch()！

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

function App() {
return (

<Route path="/" element={<Home />} />
<Route path="profile/*" element={<Profile/>} />

);
}

function Profile() {
return (

);
}

复制代码
当然，还有更酸爽的操作，直接在路由里定义的，然后用接下来的一个新API：Outlet

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

function App() {
return (

<Route path="/" element={<Home />} />
<Route path="profile" element={<Profile />}>
 <Route path=":id" element={<MyProfile />} />
 <Route path="me" element={<OthersProfile />} />
</Route>

);
}

function Profile() {
return (

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

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

function Dashboard() {
return (

);
}

function App() {
return (

} />
} />

);
}
复制代码

1. 用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});

复制代码

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

感觉又是一波强行hooks，但还是相对于之前简洁了一些。。。

function App() {
let element = useRoutes([
{ path: '/', element: },
{ path: 'dashboard', element: },
{ path: 'invoices',
element: ,
children: [

{ path: ':id', element: <Invoice /> },
{ path: 'sent', element: <SentInvoices /> }

]
},
// 重定向
{ path: 'home', redirectTo: '/' },
// 404找不到
{ path: '*', element: }
]);
return element;
}
复制代码
大小减少：从20kb到8kb
React Router v6给我们带来方便的同时，还把包减少了一半以上的体积。。。

参考文档：React Router v6迁移指南

https://blog.csdn.net/weixin_40906515/article/details/104957712

作者: Bill 本文地址: http://biaoblog.cn/info?id=1638323673312

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！