|
React Router V6 变更介绍之前一直在用5.x版本的Router，突然发现Router V6有一些变化，可以说是对嵌套路由更加友好了。这里，我们就做个简单的介绍。
1. < Switch > 重命名为< Routes >之前在用Router时，需要用Switch包裹，Switch可以提高路由匹配效率(单一匹配) 。在V6中，该顶级组件将被重命名为Routes，注意的是其功能大部分保持不变。
2. < Route >的新特性变更component/render被element替代 // v5<Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/></Switch>//v6<Routes> <Route path="/about" element={<About/>}/> <Route path="/home" element={<Home/>}/></Routes>
3. 嵌套路由变得更简单
3.1 具体变化有以下： - < Route children > 已更改为接受子路由。
- 比< Route exact >和< Route strict >更简单的匹配规则。
- < Route path > 路径层次更清晰。
function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About/>}> <Route path="/about/message" element={<Message/>} /> <Route path="/about/news" element={<News/>} /> </Route> </Routes> </BrowserRouter> );}function About() { return ( <div> <h1>About</h1> <Link to="/about/message">Message</Link> <Link to="/about/news">News</Link> {/* 将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile /> */} <Outlet /> </div> )}这里的< Outlet /> 相当于占位符，像极了{this.props.children}，也越来越像Vue了。
3.2 废弃了V5中的Redirect//v5<Redirect to="/"/>//v6<Route path="*" element={<Navigate to="/" />}/>
3.3 多个< Routes />以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。 import React from 'react';import { Routes, Route } from 'react-router-dom';function Dashboard() { return ( <div> <p>Look, more routes!</p> <Routes> <Route path="/" element={<DashboardGraphs />} /> <Route path="invoices" element={<InvoiceList />} /> </Routes> </div> );}function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="dashboard/*" element={<Dashboard />} /> </Routes> );}
4. 用useNavigate代替useHistory// v5import { useHistory } from 'react-router-dom';function MyButton() { let history = useHistory(); function handleClick() { history.push('/home'); }; return <button onClick={handleClick}>Submit</button>;};//v6中history.push()替换为navigation()import { useNavigate } from 'react-router-dom';function MyButton() { let navigate = useNavigate(); function handleClick() { navigate('/home'); }; return <button onClick={handleClick}>Submit</button>;};history的用法也将被替换成： // v5history.push('/home');history.replace('/home');// v6navigate('/home');navigate('/home', {replace: true});
5. Hooks中新钩子useRoutes代替react-router-configfunction App() { let element = useRoutes([ { path: '/', element: <Home /> }, { path: 'dashboard', element: <Dashboard /> }, { path: 'invoices', element: <Invoices />, children: [ { path: ':id', element: <Invoice /> }, { path: 'sent', element: <SentInvoices /> } ] }, // 重定向 { path: 'home', redirectTo: '/' }, // 404找不到 { path: '*', element: <NotFound /> } ]); return element;}
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容!
下载地址:
Vue+ElementUI
分享20个JavaScript |
