Estoy tratando de cargar rutas desde react-router-dom usando la ruta, pero solo obtiene la ruta "/". No carga ninguna otra ruta, la lógica de autenticación funcionaba bien antes, pero con el enrutamiento parece que nada funciona. Si agrego cualquier otro componente a la ruta "/", comenzará a cargarse, pero si elimino "/" y agrego cualquier otra ruta, por ejemplo, "/ auth", mostrará una pantalla en blanco. Intenté varias formas pero no pude encontrar ninguna solución. Agregué el componente correcto. Funcionaban sin problemas antes de agregar el enrutamiento. Ahora soy un principiante y podría ser una solución fácil para ustedes. Por favor, ayúdenme aquí. porque estoy atascado y no puedo encontrar ninguna solución. Espero que mi pregunta sea clara.
Aplicación.js
import React, {useContext} from 'react'; import Auth from './Components/Auth/Auth'; import Home from './Pages/Home'; import { AuthContext } from './Context/auth-context'; import {Redirect, Route, Switch } from 'react-router-dom'; import About from './Pages/About'; const App = props => { const authenticated = useContext(AuthContext).auth; let routes = ( <Switch> <Route path='/auth' component={Auth} /> <Route path= "/" exact component={Home}/> <Redirect to="/"/> </Switch> ); if(authenticated){ routes = ( <Switch> <Route path= '/about' component={About}/> <Route path='/auth' component={Auth} /> <Route path= '/' exact component={Home}/> <Redirect to='/'/> </Switch> ) } return ( <div> {routes} </div> ); } export default App;Índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import ContextProvider from './Context/auth-context'; import {BrowserRouter} from 'react-router-dom'; ReactDOM.render( <ContextProvider> <BrowserRouter> <App /> </BrowserRouter> </ContextProvider>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. reportWebVitals();Use la ruta exacta para la ruta "/". En su código, las rutas contienen la palabra clave "exacta", pero fuera de lugar
let routes = ( <Switch> <Route path='/auth' component={Auth} /> <Route exact path= "/" component={Home}/> <Redirect to="/"/> </Switch> ); if(authenticated){ routes = ( <Switch> <Route path= '/about' component={About}/> <Route path='/auth' component={Auth} /> <Route exact path= '/' component={Home}/> <Redirect to='/'/> </Switch> ) }No estoy seguro si usa Redirect está ahí. No sé cómo arreglar tu código, pero ¿por qué no lo intentas? Tal vez te ayude:
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; import .... ..... const App = props => { const authenticated = useContext(AuthContext).auth; return ( <Router> <Route exact path="/auth" component={Auth} /> <Route exact path="/" render={(props) =>(!authenticated ? <Redirect to={'/auth'}/> : <Home authenticated={authenticated} {...props} />)} /> <Route exact path="/about" render={(props) => (!authenticated ? <Redirect to={'/auth'} /> : <About authenticated={authenticated} {...props} />)} /> </Router> )}