withRouter组件
作用:
默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数,执行this.props.history.push('/detail')跳转到对应路由的页面,然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,将react-router的history、location、match三个对象传入props对象上,此时就可以使用this.props。
如何使用:
比如app.js这个组件,一般是首页,不是通过路由跳转过来的,而是直接从浏览器中输入地址打开的,如果不使用withRouter此组件的this.props为空,没法执行props中的history、location、match等方法。
使用时可以通过下面两种方式:
1.在要注入属性的组件上使用'@withRouter'
2.类似‘withRouter(App)’
import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
/*或者直接在组件上使用‘@withRouter’*/
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标题。
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);
复制代码
withRouter组件相关推荐
- react div组件设置可点击不可点击_React面试全解
更新:收藏前点个赞亲,为啥我每次写的东西收藏都是赞的n倍!! 花了一个月时间总结的React面试题 希望能帮助到你 全文近万字建议保存仔细过一遍 目录 面试中常提的重要概念 React生命周期 Red ...
- react 树形菜单_react使用antd组件递归实现左侧菜单导航树
/** 左侧导航组件*/import React, { Component }from 'react'import { Link, withRouter }from 'react-router-dom ...
- react-router withRouter
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入. ...
- React-关于withRouter
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入. ...
- ssr Android简书,react服务端渲染ssr
Next.js 一个轻量级的 React 服务端渲染框架 1 概念 SPA single page application : 单页面应用程序 缺点:首屏加载慢,不利于SEO SSR Server-s ...
- java react_2019JAVA最新课程-React从入门到实战(新)
React是一个库,通过react类,可以自定义组件.里边支持jsx语法,通过props和state传参/维护状态. 其他插件,比如Router/Redux都是围绕着扩展/修改react对象里的属性来 ...
- Router入门0x205: react-route + redux + react 集成
0x000 概述 这一章终于大集成了 0x001 集成react 源码 import React from 'react' import ReactDom from 'react-dom'class ...
- Vue,React,微信小程序,快应用,TS 和 Koa 一把梭
前言 前端生态越来越繁华,随着资本寒冬的来临,对前端招聘要求也变高了: 本文将从项目出发由浅入深做一个Vue,React,微信小程序,快应用,TS和 Koa的知识大串联: 相当于一篇文章搞定前端目前主 ...
- 【React】React 详细教程
前言 1.react与vue的对比 1.1.什么是模块化 是从代码的角度来进行分析的 把一些可复用的代码抽离为单独的模块:便于项目的维护和开发 1.2.什么是组件化 是从UI界面角度来进行分析的 把一 ...
最新文章
- 使.NET使用数据库连接池 .
- Python(数据库之表操作)
- Verilog功能模块——AXI4-Lite协议主机-单次写-使用FIFO
- 网络编程释疑之:TCP半开连接的处理
- 11小时 python自动化测试从入门到_从设计到开发Python接口自动化测试框架实战,资源教程下载...
- Python | Lambda和map()与示例
- 产生复选框的html,html根据复选框勾选顺序生成字符串
- mysql索引的种类
- Theatre.js 动画JavaScript库
- 十七 、二叉树的概念
- decimal简单问题
- System.Windows.Forms.TreeView
- Atitit。 工作流引擎的发展趋势
- Dojo笔记(较旧)
- 斜齿轮重合度计算公式_斜齿轮重合度计算
- syn包发送(拒绝攻击,但是有问题)
- 计算机模拟理论与应用,软物质的计算机模拟与理论方法
- amc 美国数学竞赛能用计算机吗,关于AMC美国数学竞赛的QA
- matlab遗传算法外卖配送优化(新的约束条件)【matlab优化算法十六】
- iPhone的快捷键