react-router JS 控制路由跳转实例

下面我将为您详细讲解"react-router JS 控制路由跳转实例"的攻略步骤。

步骤一:安装react-router

在项目中安装react-router-dom依赖包,react-router-dom是基于ReactDOM封装,提供了一些跟浏览器url地址相关的组件。

npm install react-router-dom --save

步骤二:基本使用方式

1. 路由定义

Route:用于路由匹配的组件,包含三个属性path、component、exact,分别表示路径、组件、是否精确匹配。例如:

import React from 'react'
import { Route } from 'react-router-dom'
import Home from './pages/home'
import About from './pages/about'

export default function () {
  return (
    <>
      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
    </>
  )
}

2. 路由导航

Link:用于路由跳转的组件,点击后会跳转到指定路径。

import React from 'react'
import { Link } from 'react-router-dom'

export default function () {
  return (
    <>
      <Link to="/">返回首页</Link>
      <Link to="/about">跳转到关于页</Link>
    </>
  )
}

3. 路由跳转

history:路由历史对象,提供了一些方法来进行路由跳转。

  • push(path, [state]):跳转到指定路径,并将 state 对象传递给目标路由组件。

```jsx
import React from 'react'

export default function ({ history }) {
function handleClick () {
history.push('/about', { from: 'Home' })
}

return (
  <>
    <button onClick={handleClick}>跳转到关于页并传参</button>
  
)

}
```

  • replace(path, [state]):替换当前路径,并将 state 对象传递给目标路由组件。

```jsx
import React from 'react'

export default function ({ history }) {
function handleClick () {
history.replace('/about', { from: 'Home' })
}

return (
  <>
    <button onClick={handleClick}>跳转到关于页并传参(替换路由)</button>
  
)

}
```

步骤三:示例演示

下面通过两个示例说明路由跳转:

1. 直接跳转到指定页面

import React from 'react'
import { Route, Switch, Link, useHistory } from 'react-router-dom'
import Home from './pages/home'
import About from './pages/about'

export default function () {
  return (
    <>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </>
  )
}

2. 编程式导航并传递参数

import React from 'react'
import { useHistory } from 'react-router-dom'

export default function () {
  const history = useHistory()

  function handleClick () {
    history.push('/about', { name: 'Jack' })
  }

  return (
    <>
      <button onClick={handleClick}>导航到关于页</button>
    </>
  )
}

这样就完成了跳转到关于页面,并且传递了一个name参数。

总结一下:

react-router 是一款专门为单页面应用程序开发设计的路由组件,支持浏览器端以及服务端渲染(SSR)。在使用的过程中我们只需在导航中定义好所需的路由和组件,然后使用内置的API或者钩子函数实现路由的跳转以及参数的传递即可。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:react-router JS 控制路由跳转实例 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js实现数组转树示例

    下面是详细讲解“JS实现数组转树示例”的攻略: 什么是数组转树 数组转树是将一个平铺的数组转换成一颗树形结构,该过程通常用于前端渲染树形结构。通常一个具有父子关系的数据明显都有一个parent和children属性,通常这种结构主要应用于分类、目录等有层级结构的数据类型中,例如文件夹、部门机构等。对于这种关系型结构数据,前后端常用的数据传输包括json格式和…

    JavaScript 2023年5月27日
    00
  • 利用JavaScript制作一个酷炫的3D图片演示

    下面是详细讲解如何利用JavaScript制作一个酷炫的3D图片演示的完整攻略。 准备工作 在开始制作之前,需要先准备好以下内容: 确认浏览器支持 WebGL,对于不支持 WebGL 的浏览器需要添加 fallback 方案以便在不支持 WebGL 的浏览器上能够正常显示。 准备好可以用来渲染的 3D 图片模型,例如 OBJ 格式的 3D 模型。 学习 Th…

    JavaScript 2023年6月10日
    00
  • JavaScript中URL编码函数代码

    下面是关于JavaScript中URL编码函数代码的详细讲解: 1. URL编码函数代码含义 URL编码是将URL中一些特殊字符转义为十六进制字符的过程。在JavaScript中可以使用encodeURI和encodeURIComponent两个函数实现URL编码。 encodeURI函数是对整个URL进行编码,除了以下字符:字母、数字、半角字符(非全角字符…

    JavaScript 2023年5月20日
    00
  • 一种新的javascript对象创建方式Object.create()

    一种新的javascript对象创建方式Object.create() Object.create()是一个比较新的JavaScript方法,它可以创建一个新对象,并将原型设置为一个已有的对象。这意味着你可以使用一个现有对象作为新对象的原型,在新对象里共享原型的属性和方法。使用Object.create()的主要优点包括: 简化代码 更简单的原型继承 字面量…

    JavaScript 2023年5月27日
    00
  • JS中取二维数组中最大值的方法汇总

    当我们需要在 JavaScript 中取二维数组中的最大值时,可能会遇到一些问题。下面我为大家详细讲解 JS 中取二维数组中最大值的方法汇总。 方法一:使用双重循环 这种方法比较直观,可以使用双重循环遍历整个二维数组,然后找到其中最大值。 function findMaxIn2DArray(arr) { let max = arr[0][0]; for (l…

    JavaScript 2023年5月27日
    00
  • 深入解析el-col-group强大且灵活的Element表格列组件

    深入解析el-col-group强大且灵活的Element表格列组件 什么是el-col-group? el-col-group是Element UI表格中列的分组或者嵌套的组件。与el-table-column相比,它具有更强大和灵活的功能。 如何使用el-col-group? 使用el-col-group前需要引入Element UI组件库,然后在代码中…

    JavaScript 2023年6月10日
    00
  • JavaScript代码性能优化总结(推荐)

    JavaScript代码性能优化总结(推荐)攻略 前言 随着Web技术的不断发展,JavaScript作为一种非常重要的脚本语言,已经成为在Web中开发中的不可少的一部分。在实际开发中,我们经常会遇到JS代码运行缓慢,导致页面卡顿,影响用户体验的问题。本文将分享一些JS代码性能优化的实用技巧。 如何优化JS代码性能 1. 减少代码中的DOM操作 操作DOM是…

    JavaScript 2023年6月11日
    00
  • Javascript Global unescape() 函数

    JavaScript Global对象中的unescape()函数用于将经过编码的字符串解码为原始字符串。该函数将所有的十六进制转义序列替换为相应的字符。以下是关于unescape()函数的完整攻略,包括两个示例。 JavaScript Global对象中的unescape()函数 JavaScript Global对象中的unescape()函数用于将经过…

    JavaScript 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部