文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 19:16

关注

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

那么如果是一个函数式组件,我们可以直接调用它提供的hooks的写法,但是如果是一个类组件呢?

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>
            {}
            <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/>}/>
            {}
            <Route path='*' element={<Notfound/>}/>
          </Routes>
        </div>

        <div className='footer'>footer</div>
      </div>
    )
  }
}

// 使用高阶组件对App组件进行增强
export default withRouter(App)

到此这篇关于React中的路由嵌套和手动实现路由跳转的方式的文章就介绍到这了,更多相关react路由嵌套和路由跳转内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯