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

你可以用自定义钩子实现另一个页面(视图)，并把它放在这里:

<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，然后再发送回原始页面。

Answer 2

你可以使用react-router-dom的Redirect组件在用户到达未知端点时重定向用户。