react之withRouter的作用

withRouter的作用：把不是通过路由切换过来的组件,将react-router的history、location和match三个对象传入到props对象上；

默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/detail')跳转到对应路由的页面

然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props

一：如何使用withRouter：

比如app.js这个组件，一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法。

我就通过在App.js组件中使用withRouter来简单介绍一下：

设置withRouter很简单只需要两步：（1）引入（2）将App组件 withRouter() 一下

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{//此时才能获取this.props,包含（history, match, location）三个对象console.log(this.props);  //输出{match: {…}, location: {…}, history: {…}, 等}render(){return (<div className='app'><NavLink to='/one/users'>用户列表</NavLink><NavLink to='/one/companies'>公司列表</NavLink><Switch><Route path='/one/:type?' component={One} /><Redirect from='/' to='/one' exact /><Route component={NotFound} /></Switch></div>)}
}
export default withRouter(App);  //这里要执行一下WithRouter

二：介绍一个简单应用

可以根据路由切换浏览器的title属性，对props.history进行监听，切换路由的时候获取当前的路由路径，同时可以根据不同的路由设置不同的浏览器title标题。

仍然是App.js组件：

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from  'react-router-dom'
import One from './One'
import NotFound from './NotFound'
class App extends Component{constructor(props){super(props);props.history.listen((location)=>{  //在这里监听location对象console.log(location.pathname);  //切换路由的时候输出"/one/users"和"/one/companies"switch(location.pathname){   //根据路径不同切换不同的浏览器titlecase '/one/users' : document.title = '用户列表'; break;case '/one/companies' : document.title = '公司列表'; break;default : break;}})}render(){return (<div className='app'><NavLink to='/one/users'>用户列表</NavLink><NavLink to='/one/companies'>公司列表</NavLink><Switch><Route path='/one/:type?'  component={One} /><Redirect from='/' to='/one' exact /><Route component={NotFound} /></Switch></div>)}
}
export default withRouter(App);

react之withRouter的作用相关推荐

React之withRouter的作用和应用
1. withRouter的作用 withRouter是不通过路由跳转的组件,将history.locattion.math放在页面的props 对象中, 默认情况下,必须是经过路由匹配的组件才可以使 ...
react中key的作用
背景: 如果为父节点添加多个相同的子节点时,不添加key属性,会报错但同时也会渲染出dom,渲染出dom其实是证明能从差异对象中渲染出真实dom,但报错的原因是因为这种写法会影响渲染的性能,不利于生层 ...
react中key的作用 1
1.react中的key有什么作用? 简单的来说就是为了提高diff的同级比较的效率,避免原地复用带来的副作用, vue和react本身都是采用diff的算法vue采用的是更为细粒的更新组件方式,即是 ...
React 中 $$typeof 的作用
图片来源于互联网当在控制台打印一个 React 组件的时候,能看出组件就是一个对象,也可以说是虚拟 dom,这个对象上面包含了所需要渲染的 dom 节点的标签名称.属性.子节点等信息.同时也有一个 ...
React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () {return (<ul>{this.state.todoItems.map(({ ...
react中findDomNode的作用
在使用react过程中,大家有时会那么这里的findDomNode是做什么的呢? import { findDomNode } from 'react-dom'; 简单来说是用来得到实际Dom的,因 ...
React 中 refs 的作用是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返 ...
react withRouter的用法
withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.withRo ...
React中的withRouter用法
withRouter withRouter的作用就是将该组件包裹进Route里面, 然后通过props就可以访问到history, location, match三个对象所以就可以依靠它进行页面跳转 ...

react之withRouter的作用

react之withRouter的作用相关推荐

最新文章

热门文章