错误的 React 路由重定向答案

【问题标题】：wrong React Route Redirect错误的 React 路由重定向
【发布时间】：2021-08-22 05:06:41
【问题描述】：

如果路线不正确，我创建了一个错误页面并重定向到它。但是当我打开本地主机时，主页是错误的。但我需要'/main'

 <Route path="/activities/" exact>
</Route>
            <Route path="/error" component={ErrorComponent} />
            <Redirect from="*" to="/error" />
            <Route path="/">
              <Redirect to="/main" />
            </Route>

【问题讨论】：

标签： reactjs redirect react-router

【解决方案1】：

首先调用通配符重定向 <Redirect from="*" to="/error" /> 并导致任何路由重定向到您的 <Route path="/error" component={ErrorComponent} /> 路由

将<Route /> 和<Redirect /> 组件包装在<Switch> 组件中，如下所示：

import { Redirect, Route, Switch } from "react-router";

<Switch>
  <Route path="/activities/" exact />
  <Route path="/error" component={ErrorComponent} exact />
  <Route path="/main" exact />
  <Redirect from="/" to="/main" />
  <Redirect from="*" to="/error" />
</Switch>

https://reactrouter.com/web/api/Switch

【讨论】：

【解决方案2】：

您需要将所有路由底部的<Redirect from="*" to="/error" /> 移动并在<Route path="/"> 中添加exact

 <Route path="/activities/" exact>
 </Route>
 <Route path="/error" component={ErrorComponent} />
 <Route path="/" exact>
     <Redirect to="/main" />
 </Route>
 <Redirect to="/error" />

Link 也会帮助你重定向到错误路径

【讨论】：