I am trying to use React-Router V4 to add routes to my app, but it is not working at all. Basically, I'm trying to programatically change the route with history.push, which is updating the browser URL, but not changing anything inside the actual app.

NOTE: I am using redux.

The only answered question on this issue is:

React history.push() is updating url but not navigating to it in browser

However, I've tried the answer to the above question, and it doesn't work for me.

Here are the important snippets:

Topmost file (index.js)

...
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>
    , document.getElementById('root'));
...

I am trying to use React-Router V4 to add routes to my app, but it is not working at all. Basically, I'm trying to programatically change the route with history.push, which is updating the browser URL, but not changing anything inside the actual app.

NOTE: I am using redux.

The only answered question on this issue is:

React history.push() is updating url but not navigating to it in browser

However, I've tried the answer to the above question, and it doesn't work for me.

Here are the important snippets:

Topmost file (index.js)

...
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>
    , document.getElementById('root'));
...

Component containing routes

...
export default function ContentRouter() {
    return <div className="content">
        <Route exact path="/dashboard" component={TmpDashboard}/>
        <Route exact path="/" component={() => {
            return <h1>Home</h1>
        }}/>
    </div>
}

Component pushing routes

...
this.handleGroupClick = (group) => {
    this.props.history.push(`/groups/${group}`);
    this.props.onOpenChange(false);
};
...
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

• javascript
• reactjs
• react-router
• url-routing

• Here's one: this.props.history.push stackoverflow.com/questions/31079081/… – admcfajn Commented Jun 18, 2017 at 22:30
• @admcfajn That is the one I am trying right now – user5182794 Commented Jun 18, 2017 at 22:59
• I do not see DrawerConnector in ContentRouter. Where is it being used? Is it nested inside one of these components? I have found it useful to use withRouter on my top level component and do <Route component="fooComponent" /> inside it. For THEIR nested components, I pass history as props. Hope that makes sense. – Hossein Commented Jun 19, 2017 at 1:27
• @Hossein does DrawerConnector have to be nested inside the route? I though it only has to be nested inside the router – user5182794 Commented Jun 19, 2017 at 12:50
• @AJC Yep it does. I went through this exact issue with my sidebar which was inside <BrowserHistory> but not wrapped in a higher order Router and it wouldn't work even though history was being passed to it. – Hossein Commented Jun 20, 2017 at 14:43

2 Answers 2

After a lot of searching in the completely wrong place, I figured out what was wrong. The lack of updating was being caused by Redux

Whenever a component is wrapped in connect it causes updates to be blocked, and the view doesn't update.

The solution is mentioned here:

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

Basically, every component with a Route or a React-Router thing inside it must be wrapped with withRouter

EDIT: Only the top level component that uses connect should be wrapped in withRouter. Note that this may cause performance issues

EDIT: The way I got around the increased coupling was to have a component just to deal with routes. That way, I only need to wrap that component, and the component with a Router.

Here's a setup that works:

The main App:

class App extends React.Component {

    render() {
        return (
            <BrowserRouter>
                <div>
                   /* this is a common component and happens to need to redirect */
                   <Route component={CommonComponentThatPushesToHistory} />
                   <div id="body">
                       /* I usually place this switch in a separate Routes file */
                       <Switch>
                           <Route exact path="FooRoute" component={FooPage}/>
                           <Route exact path="BarRoute" component={BarPage}/>
                        </Switch>
                   </div>
                   /* another common component which does not push to history */
                   <Footer />
                </div>
            </BrowserRouter>
        );
    }
}

export default withRouter(App);

CommonComponentThatPushesToHistory

class CommonComponentThatPushesToHistory extends React.Component{
    render(){
        return(
            <button type="button" 
                onClick={() => {this.props.history.push('some-page');}}>
                Click to get redirected</button>
        );
    }
}

FooPage may have a child component that pushes to history:

class FooPage extends React.Component{
    render(){
        return(
            <MyChild history={this.props.history} />
        );
    }
}

Then MyChild component can push to history the same way CommonComponentThatPushesToHistory does.