What is the use of withRouter and why components without withRouter are also used?

background:

some people say:

"withRouter can wrap any custom component, passing in three objects of react-router "s history,location,match.
there is no need to pass react-router attributes at one level. When you need to use the router
attribute, you can get the routing information you need by adding a layer of withRouter, to the component package.

others say:

if you use react-router-redux, you can get location directly from the router attribute in state
. You don"t need to use withRouter to get routing information anymore

withRouter just to get this.props.location? are there any other examples that you haven"t noticed but withRouter has played a big role?

React-router react.js

May.08,2021

The purpose of

is to enable the decorated components to obtain history , location , match ,
routing components directly from attributes, while non-routing components can only obtain these attributes through withRouter modification,
such as

<Route path='/' component={App}/>

App component can directly obtain these attributes in the route, but , if there is a sub-component Foo in the App component, then Foo cannot directly obtain the attributes in the route, but must be modified by withRouter .

Yes, just to get the parameters of location, which is essentially a high-level component that provides a context.

not all components that require routing parameters are directly connected to the route, and withRouter solves this problem.

personal understanding
for example:

 <Route exact path="/Home" component={Home}/>
 
 1.Route`this.props.location`
 2.`this.props.location``Route`
 `withRouter`

take a chestnut to say: when you need to use url to make judgments, or you need url information within the component, withRouter, the hoc-capable component, immediately has routing information, such as: query, params, location, url,search, etc.

originally there is such a good thing, so I have to pass routing attributes level by level every time the component is used. It's really annoying

Previous: What is the splitting logic of the string split method in javascript?

Next: A strange problem of String.intern method in Java

The difference between these items of react-router
what is the difference between react-router and react-router-dom? what is the difference between import {BrowserRouter as Router,Route,NavLink} from react-router-dom ; Router,Route,NavLink? 1. Why do route and NavLink have to be in Router? 2. Se...

React-router react.js

Mar.14,2021
How does react-router4 jump according to the judgment condition?
The logic is like this: the project default route is home component , determine whether there is address in localStorage , if not, jump to address component to select an address, and then jump to home component . In vue, I judge in created and the...

React-router react.js

Mar.30,2021
React uses state to pass values. State is empty after the page is refreshed.
excuse me, jump from page A to page B, pass the value with state, and state will be empty after page B is refreshed. How to solve it? A page pass value code render: (text, record, index) => { const path = { pathname: goods-deta...

Antd antdesign redux react-router react.js

Apr.03,2021
In react. Routing settings, how to make a page component display by default?
in vue, vue-router I redirect with redireact, and the route jumps to that specified route, and the page component is displayed. When I use react, it doesn t seem to show by default when it is set up in the route. Why is that? as shown in the fig...

React-router react.js

Apr.05,2021
For beginners of redux, I want to see my newly added data after clicking the Add Todo button. How to implement it?
I send dispatch, in the AddTodo.js file import React from react import { connect } from react-redux import { addToCart } from .. actions cart-actions let AddTodo = ({ dispatch }) => { let input return ( <div> ...

Redux react-router react.js

Apr.05,2021
Every time you switch a route, a prompt pops up asking if you are sure and how to trigger it globally.
question: this is a code from Ruan Yifeng s react-router: address: http: www.ruanyifeng.com blo. slide to the bottom how can I put it into the overall situation through this code? Which file should I put in? my index.js: import $ from &qu...

React-router react.js

Jun.07,2021
Antd Anchor anchor point, anchor point link href can be added to the custom label, do not want to use the own style
can Anchor anchor points and anchor link href of antd be added to custom tags? you don t want to use your own style import { Anchor } from antd ; const { Link } = Anchor; ReactDOM.render( <Anchor> <Link href="-sharpcomponent...

Javascript antd antd-mobile react-router react.js

Jul.15,2021
React scrolls the paging list to enter the details, and then click the back button, how can you keep the back page in the same position and state as it was before leaving?
problem description scroll down to the second page on the original list page of the (A) page, click the list < Link to= "xxx " > to jump to the detailed (B) page, and click the back button on the (B) page to execute this.props.history.goBack () ...

React-router react.js react-router-redux

Oct.07,2021
React-router 4.x nested routes cannot be displayed
items are built using creat-react-app I have configured Home and Account two child routes in index.js, ReactDOM.render( <HashRouter> <Switch> <Route exact path=" home" component={Home} > <Route...

React-router react.js react-router4

Jan.22,2022
React-router 4.x nested routes cannot be displayed
items are built using creat-react-app I have configured Home and Account two child routes in index.js, ReactDOM.render( <HashRouter> <Switch> <Route exact path=" home" component={Home} > <Route...

React-router react.js react-router4

Jan.22,2022
How does react realize the routing jump by clicking on the element?
use hashRouter , click on the tag to set the currently selected tag through redux , and then use what method to perform route redirection? Is there a push method like vue? <Tag color={this.props.tag === tag.name ? green : orange } key={...

React-router react.js

Jun.30,2022
How does react set the default route?
now you want to set articesList as the default route. Click the article tag in AppSider to go to articlesList route, and click on the article in ArticlesList to enter articleDetail Route App.js . <Layout className="app-container"...

React-router react.js

Jul.02,2022