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

Question

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

中删除无效的 url

有什么想法吗？

Answer 1

您可以使用

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

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

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

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

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

这里我在路径中使用了 *，这意味着如果路径字符串类型无效，那么它会自动重定向到主页。

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

How to redirect to home page if URL is invalid?

reactjs

redirect

react-router

url-redirection

react-router-v4