react-router-v4

How to listen to route changes in react router v4?

I use withRouter to get the location prop. When the component is updated because of a new route, I check if the value changed: @withRouter class App extends React.Component { static propTypes = { location: React.PropTypes.object.isRequired } // … componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { this.onRouteChanged(); } } onRouteChanged() { console.log(“ROUTE CHANGED”); } // … Read more

React Router with optional path parameter

The edit you posted was valid for an older version of React-router (v0.13) and doesn’t work anymore. React Router v1, v2 and v3 Since version 1.0.0 you define optional parameters with: <Route path=”to/page(/:pathParam)” component={MyPage} /> and for multiple optional parameters: <Route path=”to/page(/:pathParam1)(/:pathParam2)” component={MyPage} /> You use parenthesis ( ) to wrap the optional parts of … Read more

Programmatically navigate using react router V4

If you are targeting browser environments, you need to use react-router-dom package, instead of react-router. They are following the same approach as React did, in order to separate the core, (react) and the platform specific code, (react-dom, react-native ) with the subtle difference that you don’t need to install two separate packages, so the environment … Read more

How to implement authenticated routes in React Router 4?

You’re going to want to use the Redirect component. There’s a few different approaches to this problem. Here’s one I like, have a PrivateRoute component that takes in an authed prop and then renders based on that props. function PrivateRoute ({component: Component, authed, …rest}) { return ( <Route {…rest} render={(props) => authed === true ? … Read more

Nested routes with react router v4 / v5

In react-router-v4 you don’t nest <Routes />. Instead, you put them inside another <Component />. For instance <Route path=”/topics” component={Topics}> <Route path=”/topics/:topicId” component={Topic} /> </Route> should become <Route path=”/topics” component={Topics} /> with const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.path}/:topicId`} component={Topic}/> </div> ) Here is a … Read more

Passing custom props to router component in react-router v4

You can pass props to the component by making use of the render prop to the Route and thus inlining your component definition. According to the DOCS: This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you … Read more