Shulou(Shulou.com)05/31 Report--

This article is a detailed introduction to "how to use react withrouter". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to use react withrouter" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

React withrouter is used to wrap a component into Route, and pass the three history, location and match objects of "react-router" into props object. The introduction syntax is "import{withRouter}from... "。

This tutorial will operate on Windows 10, React17.0.1, Dell G3 PC.

What is React with Router?

The function of without Router is, if we have something that is not a Router, but we have to rely on it to jump to a page, such as clicking on the logo of the page and returning to the home page, then we can use without Router to do it.

The action is to wrap a component in Route, and then the three objects of react-router history, location, match will be placed in the props attribute of this component. (I understand that after adding it, I can write navigation when programming. I don't want vue to use this.$globally.) router.push() to complete)

Transfer the history, location and match objects of react-router into props object

By default, only components rendered by route matching can have this.props, and only then can they have route parameters, and only then can they use the method of function jump, and execute this.props.history.push ('/detail') to jump to the page corresponding to the route

However, not all components are directly connected to the route (jump to this component through the route). When these components need route parameters, use withRouter to pass route parameters to this component. In this case, you can use this.props

How to use without router:

For example, app.js page, not through the route jump, but directly from the browser input address to open, if you do not use withRouter, this component of this.props is empty, unable to execute history, location, match and other methods in props, such as: functional jump this.props.push ('/detail')

Setting withRouter is simple and requires only two steps: 1 introduce, 2 execute, as follows

import React,{Component} from 'react'import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //Intro withRouterimport One from './ One'import NotFound from './ NotFound'class App extends Component{ //Only then can we get this.props, including (history, match, location) three objects console.log(this.props); //Output {match: {…}, location: {…}, history: {…}, etc.} render(){return ( HOME OTHER ) }}export default with Router (App); //here to execute WithRouter Read here, this article "react withrouter how to use" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.