目录:

1、demo:NavLink 标签跳转

2、标签渲染路由组件时,获取url参数

3、编程式跳转

参考文档

  1)https://reacttraining.com/react-router/web/guides/quick-start

  2)http://react-guide.github.io/react-router-cn/index.html

1、demo:NavLink 标签跳转  <-- 返回

  index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom' import App from './components/App.jsx' ReactDOM.render(
<Router><App /></Router>,
document.getElementById('root'))

  App.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom' import About from '../views/about.jsx'
import Home from '../views/home.jsx'
import User from '../views/user.jsx' export default class App extends React.Component {
state = {
user: {
id: 1,
name: 'zs'
}
}
render() {
const {user} = this.state
return (
<div>
<h3>tab切换</h3>
{/* 导航链接 */}
<NavLink to='/about'>About</NavLink><br/>
<NavLink to='/home'>Home</NavLink><br/>
<NavLink to='/user/1'>User</NavLink> <h3>组件</h3>
<Switch>
{/* <Route path='/about' component={About} />
<Route path='/home' component={Home} /> */}
<Route path='/about'><About /></Route>
<Route path='/home'><Home /></Route>
<Route path='/user/:id'><User user={user}/></Route>
<Redirect strict from='' to='/about' />
</Switch>
</div>
)
}
}

  User.jsx

import React from 'react'

export default class User extends React.Component {
render() {
return (
<div>
user组件
{this.props.user.id + "--" + this.props.user.name}
</div>
)
}
}

  about.jsx

import React from 'react'

export default class About extends React.Component {
render() {
return (
<div>
about组件
</div>
)
}
}

2、标签渲染路由组件时,获取url参数  <-- 返回

  2.1、使用this.props.match

<Route path='/user/:id' component={User}></Route>

  使用这种标签渲染路由组件时,获取url参数:this.props.match.params.占位变量

const {id} = this.props.match.params
console.log(this.props)
console.log(`id=${id}`)

  打印结果:

  

  2.2、使用React Hook: useRouteMatch, useParams

<Route path='/user/:id'><User user={user}/></Route>

  当这样使用时,不能够通过this.props.match.params.占位变量的方式来获取url参数;此时可以使用useRouteMatch, useParams(配合function组件使用)

import React from 'react'
import { useRouteMatch, useParams } from
'react-router-dom'
export default function User(props) {
let match = useRouteMatch()
console.log(match) let { id } = useParams()
console.log(`path parameter id = ${id}`) return (
<div>
user组件
{props.user.id + "--" + props.user.name}
</div>
)
}

  在非函数组件里使用React Hook,报错:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

3、编程式跳转  <-- 返回

  3.1、对下面这样注册路由的方式,可以直接在路由组件中使用this.props.history.push('/路由')

<Route path='/user/:id' component={User}></Route>

  3.2、<Route path='/home'><Home /></Route>这样注册路由的方式,父组件传递history给子组件使用

  App.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom' import { useHistory } from "react-router-dom"; import About from '../views/about.jsx'
import Home from '../views/home.jsx'
import User from '../views/user.jsx' export default function App() {
let history = useHistory(); return (
<div>
<h3>tab切换</h3>
{/* 导航链接 */}
<NavLink to='/about'>About</NavLink><br />
<NavLink to='/home'>Home</NavLink><br />
<NavLink to='/user/1'>User</NavLink> <h3>组件</h3>
<Switch>
<Route path='/about'><About history={history} /></Route>
<Route path='/home'><Home history={history} /></Route>
<Route path='/user/:id'><User history={history} /></Route>
<Redirect strict from='' to='/about' />
</Switch>
</div>
) }

  user.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom' import UserAdd from './UserAdd.jsx'
import UserList from './UserList.jsx'
import UserEdit from './UserEdit.jsx' export default class User extends React.Component {
render() { return (
<div>
user组件<br />
{console.log(this.props)} {/* 导航链接 */} F
<NavLink to='/user/list'>UserList</NavLink> <button onClick={this.listClickHandler}>to list</button><br />
<NavLink to='/user/add'>UserAdd</NavLink> <button onClick={this.addClickHandler}>to add</button><br />
<NavLink to='/user/edit/110'>UserEdit</NavLink> <button onClick={this.editClickHandler}>to edit</button> <h3>组件</h3>
<Switch>
<Route path='/user/list'><UserList /></Route>
<Route path='/user/add'><UserAdd /></Route>
<Route path='/user/edit/:id'><UserEdit /></Route> {/* <Route path='/user/list' component={UserList}></Route>
<Route path='/user/add' component={UserAdd}></Route>
<Route path='/user/edit/:id' component={UserEdit}></Route> */}
{/* <Redirect strict from='' to='/about' /> */}
</Switch> </div>
)
} listClickHandler = () => {
this.props.history.push('/user/list')
}
addClickHandler = () => {
this.props.history.push('/user/add')
}
editClickHandler = () => {
this.props.history.push('/user/edit/110')
}
}

----

React-router的使用:标签跳转和编程式跳转的更多相关文章

  1. Vue编程式跳转

    编程式跳转 <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = &quo ...

  2. vue-router编程式跳转

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. [语法] .

  3. React Router 4.0中文快速入门

    import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...

  4. VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

  5. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  6. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  7. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  8. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  9. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

随机推荐

  1. Oracle快速运行一指禅

      对于oracle数据库下的企业级应用开发,经常会使用到新建用户,新建表空间以及数据的迁移工作.虽然目前互联网存在很多单个问题的解决方案,但是比较零散,本博文结合研发兄弟们的实际现状,提供一套完整初 ...

  2. Eureka 服务中心

    old                                                                                           使用Eure ...

  3. 1.2异常处理和服务配置、aop、日志、自定义事件处理

    一.异常处理 2.1.数据验证 现在假设说要进行表单信息提交,肯定需要有一个表单,而后这个表单要将数据提交到 VO 类中,所以现在的基本实现如下: 1. 建立一个 Member.java 的 VO 类 ...

  4. S02_CH07_ ZYNQ PL中断请求

    S02_CH07_ ZYNQ PL中断请求 7.1 ZYNQ 中断介绍 7.1.1 ZYNQ中断框图 可以看到本例子中PL到PS部分的中断经过ICD控制器分发器后同时进入CPU1 和CPU0.从下面的 ...

  5. 并不对劲的CSP-S2019

    day1 对题的第一印象: t1:颇有"小凯的疑惑"之风(赛后发现确实如此,因为最好写的正解也可以直接输出) t2:log方会被卡吧?好像倍增一个log?(赛后发现有很好写的线性做 ...

  6. NetScaler Logs Collection Guide

    NetScaler Logs Collection Guide 来源  https://support.citrix.com/article/CTX227560 Article | Authentic ...

  7. javaIO——StringReader & StringWriter

    上一篇概述篇说过,一个IO对象是指一个可以被关闭的数据源或者目标,那么StringReader和StringWriter就是一个字符串源和字符串目标. 1. StringtReader: 文档说:St ...

  8. 微信小程序编译提示tabar.iconPath 文件不存在

    tabBar.list[0].iconPath 文件不存在 明明是按路径放了本地图片的,却依然显示路径不存在 需要把路径的图片转移到编译后的weapp文件中相同路径下的img文件中 本地正常路径 粘贴 ...

  9. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  10. java程序启动极慢的问题处理

    在程序部署过程中,遇到一次java程序启动极慢的情况 参考:https://www.iteye.com/blog/windshome-1836885 原部署环境是有外网的,启动java极快 后来极其修 ...