React-router: Can no longer import { IndexRoute, browserHistory } from version 4.

[chawk]

I upgraded to v4 of React-Router and had to degrade down to version 3. I couldn't find anything in the docs saying this was deprecated? I'll try to look into this further when I get a few.

[wyze]

IndexRoute would render the same as using exact property.

For example:

const App = () => (
  <div>
    <Route exact path="/" component={Home}/>
  </div>
)

const Home = ({ match }) => (
  <div>
    <h1>Home</h1>
    <Route exact path={match.url} component={Ad}/>
  </div>
)

const Ad = () => (
  <div>Ad!</div>
)

As for browserHistory, now it it import { BrowserRouter } from 'react-router-dom'.

Here is documentation for BrowserRouter: https://reacttraining.com/react-router/web/example/basic

Also, the IndexRoute implementation could probably be solved using <Switch />: https://reacttraining.com/react-router/web/api/Switch

[timdorr]

4.0 is a complete rewrite, so you can't simply upgrade your application and change out a few things. You'll need to rethink some of how you use react-router. Not in an earth-shattering way, just in a more idiomatic React way. Trust me, it's good. But you can't really write a codemod for this upgrade 😉

[reznord]

@wyze @timdorr first of all thanks for the v4. I have a few questions and I could not find any solutions for this anywhere, so asking here.

In the earlier versions of the react-router, we could push the the URL using browserHistroy.push() method. When you use browserHistroy the query which you pass, will be transformed to the search key in the history object. The below is an example which used to work in earlier versions.

let query = {
  reportType: 'summary',
  timeZone: 'UTC'
}

  browserHistroy.push({
    pathname: 'some_path',
    query
  })

This will resolve the URL to - test.com/some_path/?reportType=summary&timeZone=UTC

In the current version (v4), it is not possible to pass the query object to the history.push() method.

  histroy.push({
    pathname: 'some_path',
    query
  })

This will resolve the URL to - test.com/some_path/

How to get this working with v4.

[jhill072]

I get that the use case for rendering a component when it exactly matches the root is still covered in this change, but what about the other half of the functionality?

For instance, I want to have a section of my app secured, but I would prefer not to have a prefix in the route, so it would look seamless to a user. In this case, I would follow the structure
<Route path="/" component={Root}>

(within Root)

<div>
  <IndexRoute component={Secured} />
  <Route path="about" component={About} />
  <!-- more public routes e.g. -->
</div>

This would have _skipped_ rendering of Secured when the path is /about, but this is lost when moving to the "exact" prop as shown above. What would be the equivalent of this functionality?

[damianprzygodzki]

In the current version (v4), it is not possible to pass the query object to the history.push() method.

Upvoting this question. There is no way to get a working and separated authentication methods - what is the reason of wrapping everything into components? Composition? Do you want to care about your 401 in a component?

The biggest issue for me with that is being unable to declare your interceptors (with redirects) on very beginning of app. Everything must be child of BrowserRouter, or be a React Component.

[xgqfrms-GitHub]

react-router & no IndexRoute any more

<Route exact path="/" component={Home}/>

===

<IndexRoute component={Home}/>

https://stackoverflow.com/questions/42748727/using-react-indexroute-in-react-router-v4

[Kavehbak]

I had the same problem and I wasted a couple of days to figure it out. This error happens simply because react-router v4 does not have the 'browserHistory'(donno if that's a good thing or not though). I solved the issue by installing v3 like this: npm install react-router@3 --save