You need to use an exact path for / otherwise it will also match /about. <Route exact path=”https://stackoverflow.com/” component={Home} /> As mentioned in the comments, for something this simple I would suggest using Create React App which will make sure your server code and your webpack settings are all correct. Once you use create-react-app you’ll … Read more
Using different key for each route should force components to rebuild: <Route key=”add-client” exact path=”/add-client” component={manageClient} /> <Route key=”edit-client” exact path=”/edit-client” component={manageClient} />
You can also use the: import { withRouter } from ‘react-router-dom’; And then on your export default, you do like this: export default withRouter(connect(mapStateToProps, {})(Layout)); Because when you have an export connect, you need to tell that that component will be using the router.
<Switch> returns only one first matching route. exact returns any number of routes that match exactly. For example: <Switch> <Route exact path=”/animals” component={Animals} /> <Route path=”/animals/fish” component={Fish} /> <Route component={Missing} /> </Switch> <Route path=”/animals” component={Order} /> If the Missing component was not inside a <Switch>, it would be returned on every single route. With exact, … Read more
Considering you are using react-router v4 Use your component with withRouter and use history.push from props to change the route. You need to make use of withRouter only when your component is not receiving the Router props, this may happen in cases when your component is a nested child of a component rendered by the … Read more
UPDATE react-router-4 has changed in that it no longer has children. However, with the Route component you can render anything that matches the path. <Router> <div> <ul> <li><Link to=”/”>Home</Link></li> <li><Link to=”/about”>About</Link></li> <li><Link to=”/contact”>Contact</Link></li> </ul> <hr/> // All 3 components below would be rendered when in a homepage <Route exact path=”/” component={Home}/> <Route exact path=”/” component={About}/> … Read more
Try this, this.props.router.push(‘/foo’) warning works for versions prior to v4 and this.props.history.push(‘/foo’) for v4 and above
import {withRouter} from ‘react-router-dom’; … class App extends React.Component { … nextPath(path) { this.props.history.push(path); } render() { return ( <button onClick={() => this.nextPath(‘/the/path’) }> change path </button> ); } } export default withRouter(App);
Use NavLink instead Link. Its not documented, but its work as you expect. https://github.com/ReactTraining/react-router/issues/4318 UPDATE 17.05.2017: https://reacttraining.com/react-router/web/api/NavLink
react-router v4 also provides a way to share history via the history package, namely createBrowserHistory() function. The important part is to make sure that the same history object is shared across your app. To do that you can take advantage of the fact that node modules are singletons. Create a file called history.js in your … Read more