react-router-dom v5和v6版本对比

最新推荐文章于 2024-07-22 17:54:23 发布

Daisy__1

最新推荐文章于 2024-07-22 17:54:23 发布

阅读量561

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/daisy_1/article/details/130322068

版权

ReactRouter从v5升级到v6引入了显著变化，包括推荐使用函数组件和Hook，如`useParams`和`useNavigate`。Switch组件被Routes替代，Redirect被Navigate取代，Route组件必须包裹在Routes内，并且路由匹配变为严格模式。此外，嵌套路由的处理方式也有所简化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐使用函数组件

v5: 使用类式组件
v6: 推荐使用函数式组件，react-router-dom 中的api只能再函数式组件中使用（大多数api是hook函数）

用Routes替换原来的Switch组件

 v5:
     <Switch>
         <Route path='/home' component={Home}/>
         <Route path='/about' component={About}/>
     </Switch> 
     
 v6:
     <Routes>
         <Route path='/home' element={<Home/>}/>
         <Route path='/about' element={<About/>}/>
     </Routes>

用Navigate组件替换原来的Redirect组件

 v5:
     <Switch>
         <Route path='/home' component={Home}/>
         <Route path='/about' component={About}/>
         <Redirect to='/home'/>
     </Switch> 

 v6:
     <Routes>
         <Route path='/home' element={<Home/>}/>
         <Route path='/about' element={<About/>}/>
         <Route index element={<Navigate to='/home'/>}/>
     </Routes>

Route组件必须包裹在Routes组件里

 v5:
     <Route path='/home' component={Home}/>
     <Route path='/about' component={About}/>

 v6:
     <Routes>
         <Route path='/home' element={<Home/>}/>
         <Route path='/about' element={<About/>}/>
     </Routes>

路由规则是默认严格匹配，匹配成功就不向下继续匹配

 v5: 默认为模糊匹配，使用关键字exact才是精确匹配
     <Switch>
         <Route exact path='/home' component={Home}/>
         <Route path='/about' component={About}/>
     </Switch> 

 v6:
     <Routes>
         <Route path='/home' element={<Home/>}/>
         <Route path='/about' element={<About/>}/>
     </Routes>

嵌套路由（多级路由）

 v5:必须要写明完整路由
     <Switch>
         <Route path='/home' component={Home}/>
         <Route path='/about' component={About}/>
         <Redirect to='/home'/>
     </Switch> 
     <Switch>
         <Route path='/home/news' component={News}/>
         <Route path='/home/message' component={Message}/>
         <Redirect to='/home/news'/>
     </Switch> 

 v6:在一级路由中使用 /* 表示后面还有多级路由，在后面的路由中只须写明路由路径 xxx 即可， 不用写 /xxx
     <Routes>
         <Route path='/home/*' element={<Home/>}/>
         <Route path='/about' element={<About/>}/>
         <Route index element={<Navigate to='/home'/>}/>
     </Routes>
     <Routes>
         <Route path="news" element={<News/>}/>
         <Route path="message" element={<Message/>}/>
         <Route index element={<Navigate to="news"/>}/>
     </Routes>

定义路由规则匹配渲染组件语法改变

 v5:
     component={Home}

 v6:
     element={<Home/>}

新增了多个hook函数,useParams、useSearchParams、useNavigate、useRoutes等