脚本宝典收集整理的这篇文章主要介绍了React Router V6更新内容详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
之前一直在用5.x版本的Router,突然发现Router V6有一些变化,可以说是对嵌套路由更加友好了。这里,我们就做个简单的介绍。
之前在用Router时,需要用Switch包裹,Switch可以提高路由匹配效率(单一匹配) 。在V6中,该顶级组件将被重命名为Routes,注意的是其功能大部分保持不变。
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>
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了
以上是脚本宝典为你收集整理的React Router V6更新内容详解全部内容,希望文章能够帮你解决React Router V6更新内容详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。