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

Posted 2023-02-21

【中文标题】如果 URL 无效，如何重定向到主页？

【英文标题】：How to redirect to home page if URL is invalid?

【发布时间】：2019-04-21 20:20:30

【问题描述】：

我正在使用 React 和 React-router 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

有什么想法吗？

【问题讨论】：

可以使用Redirect组件

@ShubhamKhatri - 当用户在浏览器上手动输入时遇到问题，例如 localhost:9090/invalidurl/invalidUrl 。我也提出了这个问题，链接是***.com/questions/64261462/…。请给出一些想法，如何做到这一点，

【参考方案1】：

你可以使用

import  Redirect  from 'react-router-dom';

并在您的交换机内添加此路由：

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

它会捕捉到任何没有路线的东西。

【讨论】：

对我来说这确实重定向但不会在exact path="/"中显示组件

确保这条路由是你的 switch 的最后一个元素

这个答案有一个小问题，当用户重新加载页面时，他们被重定向到上述路径。所以这个<Route path='/blog' exact component=Blog />在重新加载时会带你到path="/"

【参考方案2】：

如果您想在输入无效路径字符串时重定向主页，以便遵循此代码......

<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>

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

【讨论】：

感谢您的回复，我使用了以前的解决方案，效果很好，但也非常感谢您！