时间戳

首页 > 解决方案 > React 路由器和浏览器后退按钮

reactjs - React 路由器和浏览器后退按钮

问题描述

我有一个包含这些路由的路由器交换机：

<Route exact path={['/', '/gg/']}><Spinner /></Route>
<Route path={['/error', '/gg/error']} render={() => <Error />} />

该应用程序通过“.../gg/”加载，并在此微调器期间对数据库进行 axios 调用。如果调用响应是错误的，则通过“.../error”加载错误组件。

我的问题是 - 加载错误页面后，当我单击浏览器后退按钮时，它会返回到“.../gg”，而不是加载此应用程序之前的页面。我希望它返回到 '.../gg' 之前的页面，并且根本不加载 /gg。但是我不知道该怎么做...

标签： reactjsbrowserreact-routerback

解决方案

您可以尝试使用 react-router-dom 中的 Redirect 组件。将重定向状态设置为 false，然后如果数据库返回错误，则将重定向状态设置为 true。

import { Redirect } from 'react-router-dom';
// (...)

function Component(){
  const [redirect, setRedirect] = useState(false);

  // your fetch that set redirect to true in case of error

  if (redirect) return <Redirect to='/gg/error' />;

  return (<div>Component</div>);
}

推荐阅读