React中的路由嵌套和手动实现路由跳转的方式

阅读本书更多章节>>>>

文章目录

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的);

// 修改为函数组件, 类组件无法使用hookexport 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)

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-07/155086.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！