reactjs - React Router 防止随机路由

Question

如果用户输入不匹配的路由，我将如何构建 React-Router switch 语句以防止发生任何情况？换句话说，我不想要 404 未找到页面；我只是希望什么都不会发生，并且当前的 url 不会改变。

这是我的 switch 语句:

 <Switch>
    <Route path="/" exact>
      <LandingPage />
    </Route>
    <Route path="/login" exact>
      <LandingPage />
    </Route>
    <Route path="/new-account" exact>
      <LandingPage />
    </Route>

    <Route path="/account-settings" exact>
      <AccountSettings />
    </Route>

   
    <Route path="/dashboard" exact>
      <Dashboard userStatus={userStatus} />
    </Route>
    
    <Route path={"*"}>
      {/* Could I somehow achieve this here? */}
    </Route>
  </Switch>

Answer 1

您可以使用自定义 Hook 实现另一个页面( View )并将其放置在这里:

    <Route path={"*"}>
      {/* Could I somehow achieve this here? */}
    </Route>

您的*路线的新组件:

function RedirectHook() {
  history = useHistory() // which imported from react-router-dom
  useEffect(() => {
    history.goBack();
  })

  return null
}

现在，路由列表中不存在的每个页面都将被推送到 RedirectHook，然后发送回原始页面。