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

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="/" />，但它也覆盖了其他定义的路由。

这个问题怎么解决？

标签： reactjsregexreact-router-dom

Answer 1

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

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