错误的 React 路由重定向

Posted 2023-02-21

【中文标题】错误的 React 路由重定向

【英文标题】：wrong React Route Redirect

【发布时间】：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>

【参考方案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 也会帮助你重定向到错误路径