React Router 6

最新推荐文章于 2025-03-02 23:18:41 发布

木下猫

最新推荐文章于 2025-03-02 23:18:41 发布

阅读量1.3k

点赞数 1

分类专栏： React基础学习文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_39927469/article/details/125746788

版权

本文详细介绍了React Router 6的使用，包括一级路由、重定向、Routes和Route的区别、Navlink的激活样式定制、useRoutes路由表、多级路由的嵌套以及三种传参方式等核心概念，并提供了具体的代码示例。

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

9.useInRouterContext()

10.useNavigationType()

11.useOutlet()

12.useResolvePath()

在5的基础上学习6

常用的npm包是 react-router-dom 默认按照6版本

现在react 推荐使用函数式组件

1.一级路由

不使用Switch，引入新的组件 Routes

// 1.解构赋值引入需要使用的路由组件
import { Route, Routes } from "react-router-dom"

router 6里面的更改如下：

1、Switch 没了，替换的是Routes。且必须写Routes，不像Switch一样可以不写。同时Routes也保证了匹配效率，匹配后就不往后匹配了

2、Route 内不使用 components 而是使用 element 且内部写组件标签

 {/* <Switch> 
      <Route path="/about" component={About} />  */} 
<Routes>
      <Route path="/about" element={<About />} />
      <Route path="/home" element={<Home />} />
</Routes>

2. 重定向

首次使用router6，会出现下面的问题。这个表示路径“ / ” 没有对应组件

5内引入 Redirect 解决。6 内引入 Navigate 组件

// 1.解构赋值引入需要使用的路由组件
import { Route, Routes ,Navigate} from "react-router-dom"

             <Routes>
                  <Route path="/about" element={<About />} />
                  <Route path="/home" element={<Home />} />
                  <Route path="/" element={<Navigate to="/about" />} />
             </Routes>

Navigate 默认push 可以设置replace属性为true切换跳转模式

3.Routes 和 Route

Route相当if语句，对路径进行判断。Routes 必须和 Route 配合使用。

可以使用 caseSensitive 指定是否区分大小写，默认为 false 不区分

             <Routes>
                  <Route path="/about" element={<About />} />
                  <Route path="/home" element={<Home />} />
                  <Route path="/" element={<Navigate to="/about" />} />
             </Routes>

4.NavLink 自定义激活样式名

router 6 内，不再使用activeClassName，取而代之的是className中写入函数，用函数来判断当前路由是否激活

由于每个NavLink都可能要自定义激活的样式名称，代码会有重复，那么可以在render外定义函数，进行复用。

  function getClassName = ({isActive})=>{
    return isActive? "list-group-item active_nav" : "list-group-item"
  }

render() {
    return (
      /* <NavLink activeClassName='active_nav' className="list-group-item" {...this.props}/> 
        6 内，不再使用activeClassName，取而代之的是className中写入函数，用函数来判断当前路由是否激活。
      */
      <NavLink className={getClassName} {...this.props}/>
    )
  }

最低0.47元/天解锁文章