react-router-dom升级v6本文已参与「新人创作礼」活动，一起开启掘金创作之路。前言 github迁移指南

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

创建新项目后发现Switch怎么没有智能推荐了,对比了一下版本号,居然升级了🎉🎉 幸好在21年的倒数第二天发现要不就是发布了一年才知道，太落伍了让我来看看有哪些变化

Switch -> Routers

在这里插入图片描述

🤔有那么点意思

Router component -> element

<Route path='/admin/dashboard' component={Dashboard} />

<Route path=":id" element={<UserProfile />} />

重定向

//v5
<Redirect to="about" />
<Redirect to="home" push />

// v6
<Navigate to="about" replace />
<Navigate to="home" />

推荐在服务端做重定向的说明

在非服务端渲染网页可以替换如下写法 在这里插入图片描述

Router 可以直接嵌套 Router

这在之前是不行的需要在一个组件中再定义子路由在这里插入图片描述

路由路径规则简化

在这里插入图片描述

useHistory成为History

在这里插入图片描述 v5

let history = useHistory();
function handleClick() {
  history.push("/home");
}

v6

let navigate = useNavigate();
function handleClick() {
  navigate("/home");
}

//v5
const { go, goBack, goForward } = useHistory();
//v6
const navigate = useNavigate();
<button onClick={() => navigate(1)}>
<button onClick={() => navigate(2)}>
<button onClick={() => navigate(-1)}>
<button onClick={() => navigate(-2)}>

useMatch -> useRouteMatch

在这里插入图片描述查看更多前往官方迁移指南github迁移指南v5 -> v6

另外需要注意的是 Link 组件只能在路由内部使用

Home 如果是全局包裹则不需要考虑 ```javascript ReactDOM.render( , document.getElementById("root") ); ```

react-router-dom升级v6

前言