How to remove incorrect route from browser's address bar and redirect to Home route in hookrouter?

Question

Please check the following Code Sandbox:

https://codesandbox.io/s/react-router-demo-hook-switch-alternative-nfqew?from-embed

In this, when we enter an incorrect route, it loads 'NoPageFound' component.

Instead of this, when an incorrect router is entered, can we -

1) remove that wrong route from the browser's address bar?

2) redirect to Home page?

Please advise.

Answer 1

import React from "react";
import ReactDOM from "react-dom";
import { useRoutes, A, navigate } from "hookrouter";
import "./styles.css";
import routes from "./router";
import NoPageFound from "./components/NoPageFound";

function App() {
  const routeResult = useRoutes(routes);
  if (!routeResult) {
    navigate("/");
  }
  return (
    <div className="App">
      <A href="/user">Users Page</A> <br />
      <A href="/about">About Page</A>
      <br />
      <A href="/contact">Contacts Page</A> <br />
      {routeResult || <NoPageFound />}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);