React-router的使用:标签跳转和编程式跳转
目录:
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的使用:标签跳转和编程式跳转的更多相关文章
- Vue编程式跳转
编程式跳转 <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = &quo ...
- vue-router编程式跳转
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. [语法] .
- React Router 4.0中文快速入门
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
随机推荐
- Kubernetes---网络通讯模式笔记
⒈kubernetes网络通讯模式 Kubernetes的网络模型假定了所有Pod都在一个可以直接连通的扁平的网络空间中,这在GCE(Google Compute Engine)里面是现成的网 ...
- quartz报错 org.quartz.impl.StdSchedulerFactory.
quartz任务执行报错 Exception in thread "main" java.lang.NoClassDefFoundError: org/slf4j/LoggerFa ...
- dfs/bfs专项训练
A.棋盘问题——poj1321 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放 ...
- 关于container_of函数分析
#include <stdio.h> #define offset_of(type,member) ((int)&(((type *)0)->member)) #define ...
- 【Python基础】14_Python中的TODO注释
# TODO XXX... IDE中右键左下角,可显示当前项目所有的TODO
- AtCoder Beginner Contest 144 题解
传送门 $cf$ 自闭了,打 $abc$ 散散心 A - 9x9 ...这个有什么好讲的吗,题目看懂就会做了 #include<iostream> #include<cstdio&g ...
- 优化方法总结以及Adam存在的问题(SGD, Momentum, AdaDelta, Adam, AdamW,LazyAdam)
优化方法总结以及Adam存在的问题(SGD, Momentum, AdaDelta, Adam, AdamW,LazyAdam) 2019年05月29日 01:07:50 糖葫芦君 阅读数 455更多 ...
- java中锁的应用
锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized(重量级) 和 ReentrantLock(轻量级)等等 ) .这些已经写好提供的锁为我们开发提供了便利. ...
- HttpContext is null
HttpContext context1 = System.Web.HttpContext.Current; HttpContext context2 = System.Runtime.Remotin ...
- LeetCode 866. Prime Palindrome
866. Prime Palindrome(回文素数) 题目: 求出大于或等于 N 的最小回文素数. 回顾一下,如果一个数大于 1,且其因数只有 1 和它自身,那么这个数是素数. 例如,2,3,5,7 ...