React-router link doesn't work

For some reason, the <Link>s were not working for me with the configuration below.

// index.js

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

// App.js

  return (
      <div className="App">
        <Route exact={true} path="/:lang" component={Home} />
        <Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} />
        <Route path="/:lang/play" component={Play} />} />
        <Route path="/:lang/end" component={End} />
      </div >
    );

The Home component had the Link, but Links on the App would do the same. Every time I clicked it, it would only change the url, but the views would stay the same.

I was able to put it working when I added withRouter to the App.js

export default withRouter(connect(mapStateToProps, { f, g })(App));

I still don't understand what happened. Maybe it's related with redux or there is some detail I'm missing.

Since the 'About' route is a child of the 'App' route, you need to either add this.props.children to your App component:

var App = React.createClass({

 render: function() {

   var viewStateUi = getViewStateUi(this.state.appState);

    return (
      <div>
        <Header />
        <Link href="/about">About</Link>
        {viewStateUi}
        {this.props.children}
      </div>
    );
  }
});

or separate your routes:

ReactDOM.render(
  <Router history={hashHistory} >
    <Route path="/" component={App} />
    <Route path="/about" component={About} />
  </Router>, 
  document.getElementById('app')
);