React router does not redirect server

Question

I have a high order component that authenticates the user and does not redirect it to another url.

This is an isomorphic application, and it works on the client side, but if I turn off JS, the server will not redirect.

if (!this.props.authenticated) { this.context.router.push('/'); } 

I can hit this statement on the server, and this.context.router returned, but nothing happens.

Full component:

 import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; export default function (ComposedComponent) { class Authentication extends Component { static contextTypes = { router: React.PropTypes.object } static propTypes = { authenticated: PropTypes.bool } componentWillMount() { if (!this.props.authenticated) { this.context.router.push('/'); } } componentWillUpdate(nextProps) { if (!nextProps.authenticated) { this.context.router.push('/'); } } render() { return <ComposedComponent {...this.props} />; } } function mapStateToProps(state) { return { authenticated: state.auth.authenticated }; } return connect(mapStateToProps)(Authentication); } 

and this component is reached through the routes file:

 export default ( <Route path='/' component={App}> <IndexRoute component={Welcome} /> <Route path='/feature' component={requireAuth(Feature)} /> <Route path='/signin' component={Signin} /> <Route path='/signout' component={Signout} /> <Route path='/signup' component={Signup} /> </Route> ); 

This is the server visualization code:

 import { RouterContext, match } from 'react-router'; import { Provider } from 'react-redux'; import { renderToString } from 'react-dom/server'; import React from 'react'; import reactCookie from 'react-cookie'; import configureStore from '../../shared/store'; import routes from '../../shared/routes'; import assets from '../../public/assets.json'; import { AUTH_USER } from '../../shared/actions/types'; export default function (req, res) { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (error) return res.status(500).send(error.message); if (redirectLocation) return res.redirect(302, redirectLocation.pathname + redirectLocation.search); if (!renderProps) return res.status(404).send('Page not found'); const store = configureStore(); // use cookies to retrieve token const unplug = reactCookie.plugToRequest(req, res); // eslint-disable-line no-unused-vars const token = reactCookie.load('token'); // if we have a token, consider the user to be signed in if (token) { // we need to update application state store.dispatch({ type: AUTH_USER }); } const content = renderToString( <Provider store={store}> <RouterContext {...renderProps} /> </Provider> ); const initialState = JSON.stringify(store.getState()); return res.render('index', { content, assets, initialState }); }); } 

Answer 1

Can you share your server rendering code? You probably need to look at something like https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md , where you check the redirectLocation flag. That redirectLocation can be returned using the onEnter hook instead of the wrapper component. The onEnter hook onEnter registered here .

Update from the comment below: So, your server code correctly checks redirectLocation , but the onEnter hook must be used for the routing code to correctly set this redirectLocation . For instance:

Ok, so you are doing the redirectLocation correctly in the server code, but the redirectLocation populated only with the onEnter binding, for example:

 const userIsInATeam = (nextState, replace) => { if ( !isAuth ) { replace('/') } } <Route path="/users/:userId/teams" onEnter={userIsInATeam} /> 

I think nextState should have the auth prop that you are looking for to check auth.