Estoy creando un sitio web con diferentes páginas. Utiliza React.js en el front-end y Express en el back-end. Básicamente es una pila MERN.

Para la navegación uso react-router-dom v4. El enrutamiento funciona a las mil maravillas. Ahora tengo que proteger una página. Lo he intentado con la documentación de reacttraining.com, pero sin éxito.

Mi aplicación.js:

 import React from 'react'; import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; const history = createBrowserHistory(); import Home from './Home.jsx'; import Intro from './IntroVideo.jsx'; import Question from './Question.jsx'; import FormPage from './FormPage.jsx'; import Dashboard from './AdminPage.jsx' import Login from './Login.jsx' import NotFound from './NotFound.jsx' export default class App extends React.Component{ constructor() { super(); this.state = { redirectTo: null } this.checkAuth = this.checkAuth.bind(this); } checkAuth(){ this.setState({ redirectTo: '/login' }); } render() { return ( <Router history={history}> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/intro" component={Intro}/> <Route exact path="/question" component={Question}/> <Route exact path="/form" component={FormPage} /> <Route exact path="/dashboard" component={Dashboard} onEnter= {this.checkAuth} /> <Route exact path="/login" component={Login} /> <Route component={NotFound} /> </Switch> </Router> ) } }

¿Cuál es la solución correcta para mi problema? '/dashboard' debe estar protegido y solo se puede ver si ha iniciado sesión.

Gracias por la ayuda;)