react的withrouter怎么用

本文小编为大家详细介绍“react的withrouter怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“react的withrouter怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

成都创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为清水企业提供专业的网站建设、网站设计，清水网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

react withrouter用于将一个组件包裹进Route里面，并将“react-router”的三个history、location、match对象传入props对象，引入语法为“import{withRouter}from...”。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react withrouter的用法是什么

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.withRouter,

作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.（我的理解加上之后可以写编程时导航，不想vue可以在全局用this.$router.push(）来完成)

将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等方法, 如: 函数式跳转this.props.push('/detail')

设置withRouter很简单只需要两步：1引入, 2执行, 如下

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'>HOME</NavLink>
            <NavLink to='/one/companies'>OTHER</NavLink>
            <Switch>
                <Route path='/one/:type?' component={One} />
                <Redirect from='/' to='/one' exact />
                <Route component={NotFound} />
            </Switch>
        </div>)
    }
}
export default withRouter(App);  //这里要执行一下WithRouter

读到这里，这篇“react的withrouter怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

分享标题：react的withrouter怎么用
链接分享：https://www.cdcxhl.com/article24/pgioje.html

成都网站建设公司_创新互联，为您提供、商城网站、软件开发、App开发、网站排名、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联