Question

我有一个路由器组件，它根据路径路由到不同的元素：

<Router>
    <Route exact path='/' component={RouterPage}/>
    <Route exact path='/sign-up' component={SignUp}/>
    <Route exact path='/lobby' component={Lobby}/>
    <Route exact path='/game' component={Game}/>
    <Route exact path='/game/host' component={Host}/>
    <Route exact path='/debug' component={Debug}/>
</Router>

但是，我想将任何其他路径重定向到 "/"。例如，如果路径是 "/qwerty"，它将被路由到 "/"。

我尝试使用 <Redirect from="*" to="/" />，但它也会覆盖其他定义的路由。

如何解决这个问题？

Answer 1

您可以创建基于正则表达式的路由，例如：

<Route path='/!(sign-up|lobby|game|game/host|debug)' component={RouterPage} />

Answer 2

您可以在组件中设置 Link 并在该页面中添加类似标题的位置。

import {Link} from 'react-router-dom';
<Link to="/"> Home</Link>

将任何其他路由重定向到路由器中的“/”（React JS）

2 个答案: