0
189
VistasUsing path="*" for un-permitted paths shows briefly on valid path
I have inputted a route for invalid path handling. For example if a user goes to
"/random-unattributed-path" which hasn't been outlined in the router.
It works great, bar a single issue I have found so far.
This is the code I inserted:
<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>
What I have found, is that when you redirect from one path & element to another, is that it will very very briefly show the notFound element.
I have an example to show this problem here: https://giphy.com/gifs/9ZcdbA169kJy48QB4b/fullscreen
This Code-sandbox demonstrates the code but not the issue, maybe it has something to do with how Code-sandbox works or in my case of the issue, something to do with local-hosting deployment. https://codesandbox.io/s/frosty-tereshkova-ptb6nn?file=/src/Other.js
This shows going from /profile/:id to /profile back to /profile/:id
1 Respuestas
Responde la pregunta0
An issue I see is in your Navigation component. It is rendering NavLink components from react-bootstrap which render a raw anchor tag and href.
import { NavLink } from "react-bootstrap";
...
<NavLink className="tiny-scale" href={"/"}>
...
</NavLink>
This is sending a page request to the server and reloads the app.
You will want to render the NavLink component from react-router-dom to correctly handle navigation client side.
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>
);
}
I mentioned also the "odd" element prop in a comment above. It's more common to create what are called Layout Routes to render common UI elements like the Navigation component.
Example:
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>
);
}