网站导航
> 文章列表 > react-router-dom v5和v6版本对比

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

网友: 文章列表 2024-03-22 04:55:53

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

  1. 推荐使用函数组件

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

  2. 用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>

  3. 用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>

  4. 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>

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

     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>

  6. 嵌套路由（多级路由）

     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>

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

     v5:component={Home}v6:element={<Home/>}

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

网络标签：

相关问题