Tengo un problema con el uso de la página de error en mi aplicación de reacción. La página 404 siempre se muestra en la parte inferior de cada página que renderizo. Soy nuevo en reaccionar. Espero que alguien pueda ayudarme.
Esta es mi aplicación.js
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'; import Login from './components/auth/Login'; import Register from './components/auth/Register'; import ErrorPage from './components/ErrorPage'; import Order from './components/Order'; import Navbar from './components/partials/Navbar'; import Footer from './components/partials/Footer'; import Shop from './components/Shop'; import ItemDetails from './components/ItemDetails'; import Cart from './components/Cart'; import Customize from './components/Customize'; const App = () => { return ( <> <Router> <Switch> <Route exact path='/login'> <Login /> </Route> <Route exact path='/register'> <Register /> </Route> <div> <Navbar /> <Route exact path='/'> <Shop /> </Route> <Route exact path='/order'> <Order /> </Route> <Route exact path='/item/details'> <ItemDetails /> </Route> <Route exact path='/cart'> <Cart /> </Route> <Route exact path='/customize'> <Customize /> </Route> <Route component={ErrorPage} /> </div> </Switch> </Router> <Footer /> </> ); } export default App;Busqué sobre el manejo de la página de error en reaccionar y veo que el orden de las rutas es importante, pero no entiendo por qué sigo recibiendo la página de error, incluso si está en la parte inferior. Gracias chicos.
Esto se debe a que el componente de cambio devuelve el primer elemento secundario en la raíz que cumple la condición de la ruta. Si la condición de ruta no existe, se evalúa como verdadera. En su caso, tiene 3 inicios de sesión secundarios, registro y el div que siempre se evaluará como verdadero. Así que simplemente mueva todas las rutas a la raíz de su conmutador:
<Router> <Switch> <Route exact path='/login'> <Login /> </Route> <Route exact path='/register'> <Register /> </Route> <div> <Navbar /> <Switch> <Route exact path='/'> <Shop /> </Route> <Route exact path='/order'> <Order /> </Route> <Route exact path='/item/details'> <ItemDetails /> </Route> <Route exact path='/cart'> <Cart /> </Route> <Route exact path='/customize'> <Customize /> </Route> <Route component={ErrorPage} /> </Switch> </div> </Switch> </Router>