Reactjs 如果URL无效，如何重定向到主页？

我正在使用React和React路由器v4

以下是我的路线组件：

<Switch>
              {/* <Route path='/blog' exact component={Blog} /> */}
              <Route path='/projects/:id' component={ProjectDetails} />
              <Route path='/career/:id' component={CareerDetails} />
              <Route path='/' component={withScrollPreservation(LandingPage)} />
              <Route component={withScrollPreservation(LandingPage)} />
            </Switch>

{/*  */}

我的问题是：

如果用户键入的东西是无效的路由给我希望它重定向到主页。考虑这个在本地运行的场景：

localhost:4000/

-主页

localhiost:4000/invalidurl

-应重定向回

localhost:4000/

，并从url中删除invalidurl

有什么想法吗？

你可以用

import { Redirect } from 'react-router-dom';

并将此路由添加到交换机中：

<Route render={() => <Redirect to={{pathname: "/"}} />} />

}/>

---

它将捕获任何没有路由的内容。

如果您想在键入无效路径字符串时重定向主页，请遵循以下代码

<Switch>
   <Route exact path="/" component={Home} />
   <Route path="/login" component={Login} />
   <Route path="/signup" component={Signup} />
   <Route path="/user" component={User} onEnter={this.requireAuth}/>
   <Route path="*" component={Home} />
</Switch>

---

这里我在路径中使用了*表示如果路径字符串类型无效，它将自动重定向到主页。

您可以使用component@ShubhamKhatri-当用户在localhost:9090/{invalidurl}/{invalidurl}等浏览器上手动输入时，我遇到问题。我也提出了这个问题，林克是。请给出一些想法，如何做到这一点，谢谢你的回复，我使用了以前的解决方案，它的工作就像一个魅力，但也非常感谢你！对我来说，这确实重定向了，但不会在

精确路径=“/”

中显示组件。请确保此路由是交换机的最后一个元素