react router 路由嵌套（React中的路由嵌套和手动实现路由跳转的方式）
React的路由嵌套
接上一篇文章, 在上一篇文章中讲解了路由的基本介绍, 我再来介绍一下路由的其他用法
在开发中 ，路由之间是存在嵌套关系的 。
这里我们假设Home页面中还有两个页面内容:
推荐列表和排行榜列表;
点击不同的链接可以跳转到不同的地方 ，显示不同的内容;
<Routes> <Route path=/ element={<Navigate to="/home"/>}></Route> {/* 配置二级路由 */} <Route path=/home element={<Home/>}> <Route path=/home element={<Navigate to="/home/recommend"/>}/> <Route path=/home/recommend element={<HomeRecommend/>}/> <Route path=/home/ranking element={<HomeRanking/>}/> </Route> <Route path=/about element={<About/>}/> <Route path=/profile element={<Profile/>}/> <Route path=* element={<Notfound/>}/> </Routes><Outlet>组件用于在父路由元素中作为子路由的占位元素, 也就是子路由的展示位置(必须写) 。
// home组件 import { Link, Outlet } from react-router-dom export class Home extends PureComponent { render() { return ( <div> <h2>Home</h2> <Link to="/home/recommend">推荐</Link> <Link to="/home/ranking">排行</Link> <Outlet/> </div> ) } }手动路由的跳转
目前我们实现的跳转主要是通过Link或者NavLink进行跳转的 ，实际上我们也可以通JavaScript代码进行跳转 。
Link或者NavLink渲染出来是一个a元素, 如果我们想点击一个button或者其他元素实现页面跳转, 就需要通过JavaScript代码进行跳转了
我们知道Navigate组件是可以进行路由的跳转的 ，但是依然是组件的方式 。
如果我们希望通过JavaScript代码逻辑进行跳转(比如点击了一个button) ，那么就需要获取到navigate对象 。
在Router6.x版本之后 ，代码类的API都迁移到了hooks的写法:
如果我们希望进行代码跳转 ，需要通过useNavigate的Hook获取到navigate对象进行操作, hook只能在函数组件中使用(这里了解一下, 后面文章会有专门详细讲解hook的);
// 修改为函数组件, 类组件无法使用hook export function App() { // 使用hook const navigate = useNavigate() function navigateTo(path) { navigate(path) } return ( <div className=app> <div className=header> <Link to="/home">首页</Link> <Link to="/about">关于</Link> <Link to="/profile">我的</Link> {/* 点击时将路径传入到navigate中 */} <button onClick={() => navigateTo("/category")}>分类</button> <span onClick={() => navigateTo("/order")}>订单</span> </div> <div className=counter> <Routes> {/* 当默认路径 / 时, 重定向到home页面 */} <Route path=/ element={<Navigate to="/home"/>}></Route> {/* 配置二级路由 */} <Route path=/home element={<Home/>}> <Route path=/home element={<Navigate to="/home/recommend"/>}/> <Route path=/home/recommend element={<HomeRecommend/>}/> <Route path=/home/ranking element={<HomeRanking/>}/> </Route> <Route path=/about element={<About/>}/> <Route path=/profile element={<Profile/>}/> <Route path=/category element={<Category/>}/> <Route path=/order element={<Order/>}/> {/* 当上面路径都没有匹配到时, 显式Notfound组件 */} <Route path=* element={<Notfound/>}/> </Routes> </div> <div className=footer>footer</div> </div> ) }那么如果是一个函数式组件 ，我们可以直接调用它提供的hooks的写法 ，但是如果是一个类组件呢?
Router6.x确实是没有提供类组件的API, 如果我们确实想要在类组件中使用, 需要再使用高阶组件对类组件进行增强(通过高阶组件增强向类组件中传入navigate) 如果是Router5.x, 是有提供withRouter这样一个高阶组件的, 但是Router6.x中, 我们需要自己实现这样的高阶组件 封装高阶函数方法如下, 由于其他地方也可能使用高阶组件, 所以我是在一个单独的文件中进行封装 import { useNavigate } from "react-router-dom" // 封装高阶组件 export default function withRouter(WrapperComponent) { return function(props) { // 在函数组件中通过hook拿到navigate对象 const naviagte = useNavigate() // 将获取到的navigate放到一个对象中 const router = {naviagte} return <WrapperComponent {...props} router={router} /> } }这样我们引入自己封装的高阶组件, 通过高阶组件的增强, 就可以在类组件的props中获取到navigate
export class App extends PureComponent { navigateTo(path) { // 经过高阶组件增强的组件中, 可以在props中拿到navigate const { naviagte } = this.props.router // 调用navigate naviagte(path) } render() { return ( <div className=app> <div className=header> <Link to="/home">首页</Link> <Link to="/about">关于</Link> <Link to="/profile">我的</Link> {/* 发生点击事件时, 将路劲传递过去 */} <button onClick={() => this.navigateTo("/category")}>分类</button> <span onClick={() => this.navigateTo("/order")}>订单</span> </div> <div className=counter> <Routes> {/* 当默认路径 / 时, 重定向到home页面 */} <Route path=/ element={<Navigate to="/home"/>}></Route> {/* 配置二级路由 */} <Route path=/home element={<Home/>}> <Route path=/home element={<Navigate to="/home/recommend"/>}/> <Route path=/home/recommend element={<HomeRecommend/>}/> <Route path=home/ranking element={<HomeRanking/>}/> </Route> <Route path=/about element={<About/>}/> <Route path=/profile element={<Profile/>}/> <Route path=/category element={<Category/>}/> <Route path=/order element={<Order/>}/> {/* 当上面路径都没有匹配到时, 显式Notfound组件 */} <Route path=* element={<Notfound/>}/> </Routes> </div> <div className=footer>footer</div> </div> ) } } // 使用高阶组件对App组件进行增强 export default withRouter(App)创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！