如何从浏览器的地址栏中删除不正确的路由并重定向到 hookrouter 中的 Home 路由？

Question

请检查以下代码沙盒：

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

在此，当我们输入错误的路线时，它会加载 'NoPageFound' 个组件。

取而代之，当输入错误的路由器时，我们可以 -

1) 从浏览器的地址栏中删除错误的路由？

2) 重定向到主页？

请指教

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

如何从浏览器的地址栏中删除不正确的路由并重定向到 hookrouter 中的 Home 路由？

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

reactjs

react-hooks

hookrouter