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日

相关文章

  • JavaScript下一版本标准ES6的Set集合使用详解

    JavaScript下一版本标准ES6的Set集合使用详解 什么是Set集合 Set是一种新的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set有以下特点: Set内部使用Hash表存储元素,导致元素的顺序不是按照插入顺序保存,但是一组具有相同内容的对象在Set内只有一份。 Set添加元素时,不会进行类型转换,比如1和”1″是两个不同的值。…

    JavaScript 2023年5月28日
    00
  • asp.net treeview checkbox 相关问题

    下面我将详细讲解关于 ASP.NET TreeView 控件中复选框相关问题的完整攻略。 ASP.NET TreeView 控件复选框基础 在 ASP.NET 中,TreeView 控件提供了一种便捷的方式来展示树形结构的数据。而为了在右侧较小的区域中显示更多数据,我们往往采用 TreeView 控件中的复选框来进行多选。一下是一些 ASP.NET Tree…

    JavaScript 2023年6月11日
    00
  • JS字符串长度判断,超出进行自动截取的实例(支持中文)

    实现JS字符串长度判断并进行自动截取支持中文的方法主要涉及以下步骤: 获取字符串长度JavaScript中获取字符串长度的方法是通过字符串的length属性获取,例如 var str = ‘Hello World’; console.log(str.length); // 11 判断是否超出限制根据所需的字符串长度限制和当前字符串长度,可以使用if语句或三元…

    JavaScript 2023年5月28日
    00
  • javascript函数命名的三种方式及区别介绍

    对于“javascript函数命名的三种方式及区别介绍”,可以从以下三种方式展开讲解: 第一种方式:函数声明 使用函数声明语句来创建函数,这是最常见的一种函数命名方式,也是最容易理解的方式。 函数声明的基本结构如下: function functionName() { //函数体 } 示例: function greeting() { console.log…

    JavaScript 2023年5月27日
    00
  • JavaScript如何调试有哪些建议和技巧附五款有用的调试工具

    JavaScript如何调试 调试是软件开发和编程中最重要的一环。JavaScript 也不例外,调试是找到和修复问题的关键步骤。接下来,我们将深入探讨 JavaScript 的调试方法和技巧,介绍五款流行的 JavaScript 调试工具。 如何调试 JavaScript 以下是 JavaScript 调试的步骤: 理解错误的类型:理解代码可能出现的不同类…

    JavaScript 2023年5月27日
    00
  • 让div运动起来 js实现缓动效果

    让div运动起来并实现缓动效果是Web开发中常见的需求之一。JS可以实现动态控制DOM节点的属性值,通过操作CSS属性的变化来实现节点的平移、缩放、旋转等动画效果,同时还可以结合缓动算法,使得CSS属性的变化更加平滑、自然。以下是一些实现div缓动效果的攻略和示例: 1.缓动算法介绍 在实现缓动效果时,使用缓动算法可以让CSS属性的变化更加自然、平缓,提升动…

    JavaScript 2023年6月11日
    00
  • js中判断变量类型函数typeof的用法总结

    标题:JS中判断变量类型函数typeof的用法总结 1. typeof函数的介绍 typeof是JavaScript中的一个关键字,用于判断一个变量的类型。它返回一个字符串,表示变量的数据类型。需要注意的是,typeof运算符不是函数,括号可以省略。 普通变量的类型判断: let a = 1; console.log(typeof a); // number…

    JavaScript 2023年5月27日
    00
  • JavaScript面向对象的程序设计(犯迷糊的小羊)

    好的。首先,JavaScript是一门基于对象的编程语言。它提供了许多面向对象编程的特性,如对象、类、继承等。如果您曾经在其他编程语言中使用过面向对象编程,那么理解JavaScript的面向对象编程会相对轻松些。 一、对象 面向对象编程的基础是对象。JavaScript中的对象是一个键-值对的集合,其中值可以是属性或方法。对象可以通过字面量或构造函数创建。 …

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