react-router使用一些记录

151 阅读1分钟

react 导入 react-router-dom引入Switch报 'Switch' is not exported from 'react-router-dom'

image.png

react-router-domV5升级到V6后,有些使用做了一些改变:

Switch 重命名为 Routes(设置默认导航页面也是这样的方法)

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

如何添加activeclass(给按键的地方增加选择器)

NavLink className={({ isActive }) =>isActive ? "light" : ""} to="/about" >About</NavLink>
引入NavLink 添加选中之后生成类叫light 再书写light的样式即可

可以通过搜索React Router中文文档找到更多相关的使用方法

后续一些升级的改变在改链接下,这个仅仅是为了自己学习记录用,没有其他的目的 链接