0
203
VistasEl uso de path="*" para rutas no permitidas muestra brevemente una ruta válida
He ingresado una ruta para el manejo de rutas no válidas. Por ejemplo, si un usuario va a
"/random-unattributed-path" que no se ha descrito en el enrutador.
Funciona muy bien, salvo un solo problema que he encontrado hasta ahora.
Este es el código que inserté:
<Router>
<Routes>
<Route path="/" element={[<Navigation key={0}/>, <Home key={1} />]} />
<Route
path="/AboutUs"
element={[<Navigation key={0} />, <AboutUs key={1} />]}
key={0}
/>
<Route
exact
path="/Profile/:id"
element={[<Navigation key={0}/>, <Profile key={1} />]}
/>
<Route
path="/Profile"
element={[<Navigation key={0} />, <Profile key={1} />]}
/>
<Route path="*" element={[<NotFound />]} />
{/* THIS LINE RIGHT HERE ^^^^^^^^^^^^ */}
</Routes>
</Router>
Lo que he encontrado es que cuando se redirige de una ruta y un elemento a otro, se mostrará muy brevemente el elemento notFound.
Tengo un ejemplo para mostrar este problema aquí: https://giphy.com/gifs/9ZcdbA169kJy48QB4b/fullscreen
Este Code-sandbox demuestra el código pero no el problema, tal vez tenga algo que ver con el funcionamiento de Code-sandbox o, en mi caso, algo que ver con la implementación del alojamiento local. https:// codesandbox.io/s/frosty-tereshkova-ptb6nn?file=/src/Other.js
Esto muestra ir de /profile/:id a /profile de nuevo a /profile/:id
1 Respuestas
Responde la pregunta0
Veo un problema en su componente de Navigation . Está representando componentes de NavLink desde react-bootstrap que representan una etiqueta de anclaje sin formato y href .
import { NavLink } from "react-bootstrap";
...
<NavLink className="tiny-scale" href={"/"}>
...
</NavLink>
Esto envía una solicitud de página al servidor y recarga la aplicación.
Querrá renderizar el componente NavLink desde react-router-dom para manejar correctamente el lado del cliente de navegación.
import { NavLink } from "react-bootstrap";
import { NavLink as BaseNavLink } from "react-router-dom";
export default function Navigation() {
return (
<div className="App">
<h1>Navigation</h1>
<NavLink as={BaseNavLink} className="tiny-scale" to="/">
<span className="Main-element"> home </span>
</NavLink>
<NavLink as={BaseNavLink} className="tiny-scale" to="/other">
<span className="Main-element"> other </span>
</NavLink>
<NavLink as={BaseNavLink} className="tiny-scale" to="/deadlink">
<span className="Main-element"> dead link </span>
</NavLink>
</div>
);
}
Mencioné también el accesorio de element "extraño" en un comentario anterior. Es más común crear lo que se denomina rutas de diseño para representar elementos comunes de la interfaz de usuario, como el componente de Navigation .
Ejemplo:
import { Outlet } from 'react-router-dom';
import Navigation from "./Navigation";
const Layout = () => (
<>
<Navigation />
<Outlet />
</>
);
...
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import NotFound from "./NotFound";
import Other from "./Other";
import Layout from "./Layout";
export default function App() {
return (
<Router>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/Other" element={<Other />} />
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
</Router>
);
}