0
点赞
收藏
分享

微信扫一扫

【react】react生命周期钩子函数:

React Router 6 VS React Router 5.x

  1. 内置组件的变化; 移除<Switch /> , 新增<Routes />
  2. 语法的变化; component = { About } 变为 element = { <About /> }
  3. 新增多个hook
  4. 官方明确推荐函数式组件了!

一级路由(变化)

  1. 安装路由 npm i react-router-dom (默认是最新版本)
  2. 路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作
  3. 呈现路由的时候,需要注册路由 实用Routes代替了Switch; Switch当时写了是涉及到了一个匹配效率的问题,匹配到了就不会继续往下匹配,之前是一定要写
componen = { About } 变为 element = { <About /> } 

重定向 Navigate(变化)

  • 作用; 只要<Navigate> 组件被渲染,就会修改路径,切换视图
  • replace属性用于控制跳转模式, (push 或 replace, 默认是push)
    规则
{/* 注册路由 */}
<Routes>
<Route path="/ABOUT" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
<Route path="/" element={<Navigate to="/about"/>}/>
</Routes>

NavLink高亮(变化)

你要想自定义类名,需要把className写成一个函数的形式

  • 较长的时候,抽出一个函数
function computedClassName({isActive}){
return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
// 在路由中使用高亮的自定义属性
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<NavLink className={computedClassName} to="/about">About</NavLink>
<NavLink className={computedClassName} to="/home">Home</NavLink>
</div>

</div>

useRoutes路由表

  • 将之前那一堆抽取出去, 使用hooks来处理
export default [
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>
},
{
path:'/',
element:<Navigate to="/about"/>
}
]
// 引入上述代码, 然后使用hooks
const element = useRoutes(routes)
// 使用路由表
<div className="panel-body">
{/* 注册路由 */}
{element}
</div>

嵌套路由

  • 直接在路由表中加上相应的children属性, 用于相关操作
export default [
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>,
children:[
{
// 注意; 子级路由不用加上斜杠
path:'news',
element:<News/>
},
{
path:'message',
element:<Message/>
}
]
},
{
path:'/',
element:<Navigate to="/about"/>
}
]
  • 使用Outlet来指定路由呈现的位置
<div>
<h2>Home组件内容</h2>
<div>
<ul className="nav nav-tabs">
<li>
{/* 书写子级路由的时候不需要传参 */}
<NavLink className="list-group-item" to="news">News</NavLink>
</li>
<li>
<NavLink className="list-group-item" to="message">Message</NavLink>
</li>
</ul>
{/* 指定路由组件呈现的位置 */}
<Outlet />
</div>
</div>
举报

相关推荐

0 条评论