He almacenado en redux si un usuario está autenticado o no. Lo que quiero hacer es, una vez que vaya a localhost:3000/ quiero que muestre la página de inicio si el usuario no está autenticado o muestre el tablero si el usuario está autenticado. Esto es lo que tengo hasta ahora.
export default ( <Route path="/" component={App} > <IndexRoute component={HomePage} /> <Route path="/dashboard" component={Dashboard} /> <Route path="*" component={NotFound} /> </Route> ); Me gustaría que IndexRoute esté condicionado a la autenticación.
En el componente HomePage , puede representar otros dos componentes basados en la autenticación. Por ejemplo
class HomePage extends Component { //... render() { if (currentUser) return <Dashboard /> // if user exists in the store else if (fetchingCurrentUser) return <LoadingView /> // if you need to fetch the user show a loading page else return <UnauthenticatedHomeView /> // else, return a homepage for unauthenticated users } } De esta manera, puede eliminar la ruta '/dashboard' por completo para que el usuario no tenga que viajar a esa ruta para llegar a su tablero. Además, HomePage solo actúa como un contenedor para los diferentes componentes posibles que puede representar dentro de él.
Tus rutas se verían así.
export default ( <Route path="/" component={App} > <IndexRoute component={HomePage} /> <Route path="*" component={NotFound} /> </Route> ); Otra nota: también puede conectar la función onEnter a una ruta para que se ejecute cuando la ruta esté a punto de ingresar. Aquí puede hacer algunos otros autenticados para proteger una ruta. Sin embargo, la implementación del ejemplo anterior tendría que cambiar si usa onEnter pero ahora sabe que tiene esa opción.
Podría usar la representación condicional en JSX.
export default ( <Route path="/" component={App} > {isLoggedIn ? ( <IndexRoute component={HomePage} /> ) : ( <IndexRoute component={Dashboard} /> )} </Route> );