Using path="*" for un-permitted paths shows briefly on valid path

ABpositive 0
Viewed 21

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

react-router-dom react-router reactjs javascript
1 Answers

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>
  );
}

Edit using-path-for-un-permitted-paths-shows-briefly-on-valid-path

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>
  );
}
Drew Reese0
Related