Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are the react-router component props not including history?

I'm loving v4 but in 4.1.2 this keeps tripping me up when using the browser router:

With a component in a Route component I have these props passed in: {computedMatch, location, path} although the documentation tells me to expect {match, location, history} which is what I get with the hash router.

To get the history passed in I have to use the withRouter wrapper which feels very clunky because the relevant component is the component prop to a Route component.

The documentation sounds right to me. Is this a bug?

like image 228
Paul Whipp Avatar asked Aug 10 '17 06:08

Paul Whipp


People also ask

How do you pass history props in react router?

import React, { PureComponent } from 'react'; import { withRouter } from 'react-router-dom'; class PassToMeMyRouterHistory extends PureComponent { redirectToHome = () => { const { history } = this. props; if(history) history. push('/home'); } render() { const { history } = this. props; return( (history) ?

Does react router use history API?

React Router uses the history package, which builds on the browser history API to provide an interface to which we can use easily in React apps. location - (object) The current location. May have the following properties: pathname - (string) The path of the URL.

What is this props history in react?

history prop is the history API which is used to navigate user to other view programatically, which are are going to do in a bit. In ContactUs component, we will make use of match prop to take out some hardcoded values of path and location. match. url return URL path for which a component was rendered.


1 Answers

You can get access to {match, location, history} if you use Route as

<Route path="/" component={myComponent} 

In above code you will have match location and history accessible inside myComponent.

Or else you have to use withRouter

like image 182
JupiterAmy Avatar answered Oct 05 '22 01:10

JupiterAmy