React Router V6更新内容详解

极客

　　这篇文章主要为大家介绍了React Router V6更新内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

React Router V6 变更介绍
　　之前一直在用5.x版本的Router，突然发现Router V6有一些变化，可以说是对嵌套路由更加友好了。这里，我们就做个简单的介绍。

1. ‹ Switch > 重命名为‹ Routes >
　　之前在用Router时，需要用Switch包裹，Switch可以提高路由匹配效率(单一匹配) 。在V6中，该顶级组件将被重命名为Routes，注意的是其功能大部分保持不变。

2. ‹ Route >的新特性变更
　　component/render被element替代

2. // v5
3. ‹Switch>
4.     ‹Route  path="/about" component={About}/>
5.     ‹Route  path="/home" component={Home}/>
6. ‹/Switch>
7. //v6
8. ‹Routes>
9.     ‹Route  path="/about" element={‹About/>}/>
10.     ‹Route  path="/home" element={‹Home/>}/>
11. ‹/Routes>

复制代码

3. 嵌套路由变得更简单

3.1 具体变化有以下：

   

• ‹ Route children > 已更改为接受子路由。   
  
• 比‹ Route exact >和‹ Route strict >更简单的匹配规则。   
  
• ‹ Route path > 路径层次更清晰。
  

2. function App() {
3.   return (
4.     ‹BrowserRouter>
5.       ‹Routes>
6.         ‹Route path="/" element={‹Home />} />
7.         ‹Route path="/about" element={‹About/>}>
8.           ‹Route path="/about/message" element={‹Message/>} />
9.           ‹Route path="/about/news" element={‹News/>} />
10.         ‹/Route>
11.       ‹/Routes>
12.     ‹/BrowserRouter>
13.   );
14. }
15. function About() {
16.   return (
17.     ‹div>
18.       ‹h1>About‹/h1>
19.       ‹Link to="/about/message">Message‹/Link>
20.   ‹Link to="/about/news">News‹/Link>
21.         {/*
22.        将直接根据上面定义的不同路由参数，渲染‹MyProfile />或‹OthersProfile />
23.         */}
24.       ‹Outlet />
25.     ‹/div>
26.   )
27. }

复制代码

　　这里的‹ Outlet /> 相当于占位符，像极了{this.props.children}，也越来越像Vue了