Is there a clean way to conditionally load and display different components for the same React Router route?

Question

A use case is that I want to map the root (/) to one of two different components based on whether the user is logged in or not, and I want these two components to be in different packages and load lazily. therefore, it will not be easy to put an input check into the render () method.

I tried using dynamic route determination with require.ensure () to lazily load the component, and it works the first time, but after changing the input state the component does not update (even if I switch to another route and back to /). I tried to force the rendering of the router again by setting the details to the component that contains the router, either manually or by making it a component connected to Redux, and I also tried to add a listener to the Redux repository and change the state of the component in the response to login, but in all attempts, I received the error "You cannot change, it will be ignored", and the component will not change.

My ugly solution is to have a different component loading code outside the router, listen for the input state change and in response load the corresponding component and set it in the state of the wrapper component referenced by render () code. Is there a clean way to "React -Router-ish "do what I want?

Answer 1

React Router 4 pretty much solves this because it made part of the route configuration for rendering the component, so the presence of conditional rendering is the same regardless of whether it is based on location or other details / states.

Answer 2

The closest to the clean React-Router-ish method is to use React Router Enterhooks .

An input hook is a user-defined function called when the route will be displayed . As the first argument, it receives the next state of the router. The replace function can be used to initiate a jump to another URL.

So, use the onEnter (nextState, replace, callback?) Attribute on your <Route /> .

Called when a route is entered. It provides the following router status and function to redirect to another path. this will be the instance of the route that caused the hook.

If the callback is specified as the third argument, this hook will be executed asynchronously, and the transition will be blocked until the callback is called.

The general recommendation I follow is to put authentication from your routes and put it inside the transition events / hooks .

The usual behavior is before the route handler actually gets the visualization, check auth and redirect the user to another route. In your case, if you want to use the same route, but visualize different components, you can also do this using the same technique. However, this is not an ordinary thing (based on what I saw), but it should be possible.

For a complete example of this approach, here is an example authentication code that you can verify . It is shared by the creators of React Router, so it looks believable to me.

PS: My answer is valid for React Router versions> 0.13.x.