营销型网站报价多域名指向同一网站
React Router 6 VS React Router 5.x
- 内置组件的变化; 移除<Switch /> , 新增<Routes />
- 语法的变化; component = { About } 变为 element = { <About /> }
- 新增多个hook
- 官方明确推荐函数式组件了!
一级路由(变化)
- 安装路由 npm i react-router-dom (默认是最新版本)
- 路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作
- 呈现路由的时候,需要注册路由 实用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>