确保上游模块使用正确的browser-react-router的历史记录？

Question

I am running into an issue whereby my the browserHistory.push() operation is not working when in an upstream module. What happens in that the URL is the address bar updates, but the contents of the page don't change. Both upstream and downstream modules are using react-router version 3.0.5.

The test component in the upstream module is:

import React from 'react';
import { browserHistory } from 'react-router';

export default function render (props) {
    return (
        <div className="container">
            <div><div style={{height: '200px'}}></div><div onClick={(event) => {browserHistory.push('/login')}}>click me</div></div>                
        </div>
    )
}

The upstream module specifies "react-router": "^3.0.5" in the dependencies section of package.json .

A work-around that I have found is to pass browserHistory in as a property, such that in downstream:

 import MyView from 'MyModule';
 import  {browserHistory } from 'react-router';

 <MyView browserHistory={browserHistory} />

and then in upstream:

 this.props.browserHistory.push('/login')

Note, as part of my analysis I had placed the following code in the downstream module, to see if location changes were being triggered, but I found it wasn't firing until I used my workaround:

browserHistory.listen((location, action) => {
    console.log('location change:', location, action);
})

I am not sure that passing browserHistory to the upstream module in this way the right approach, so can anyone tell me whether this is the right approach or whether there is potentially something else causing this behaviour?

Answer 1

If I base myself on current behaviour, and what I have observed in the code for the ' Link ' component, it would seem importing browserHistory would not be the correct way to go. Instead we should probably use the router property that is passed in by react-router, and do the following:

this.props.router.push('/login')

This seems to be the only reliable approach I have found, without having to explicitly pass in browserHistory from the downstream component.

The added bonus is that I don't have to worry about what history implementation the router is using, from the component's perspective.

Note, if this could was to be distributed, then it probably shouldn't assume that the downstream module is using react-router, and handle the page change with a fallback approach, such as via window.location or a passed in event handler.

BTW as reference, there is this explanation in the react-router lessons: ' Navigating Programatically '. Also, since browserHistory acts as a form of wrapper to the browser's history API , then it worth noting that in the docs it says history.pushState() will update the URL in the address bar "but won't cause the browser to load" the page, so it is important to consider what events are causing React router to update the displayed page.

Update there may be another cause to this issue: a duplicate version of react-router being included in the lib. I only came to this conclusion based on some issues with a duplicate version of react causing issues. In our case we are using webpack and it was including react in the generated library file. To resolve this, we need to add the following to the webpack.config.js :

externals: ['react', 'react-dom', 'react-router']

At the same time, one benefit of the this.props.router approach is that we don't need to explicitly include react-router as a dependency. I would consider that both these approaches are complementary.