如何在 React 的私有路由中重定向？答案

【问题标题】：How to redirect in Private Route in React?如何在 React 的私有路由中重定向？
【发布时间】：2020-12-20 18:38:02
【问题描述】：

我的 PrivateRoute 组件有问题。它应该在特定情况下将用户重定向到特定页面，但事实并非如此。登录后，我的条件工作正常，但我没有重定向到正确的页面。我只看到/#，这是我正在使用的 b2c 的默认重定向。

组件：

const PrivateRoute: React.FC<PrivateRouteProps> = (props: PrivateRouteProps) => {
  const { authStatus } = props;
  ...
  if (authStatus === AuthStatus.SomeRole) {
    // conditional is working
    return <Route exact path="/specificUrl" render={() => <Redirect to="/specificUrl" />} />;
  }
  ...
};

我的应用：

const App: React.FC = () => (
  <Suspense fallback={<Loader />}>
    <Switch>
      ...
      <PrivateRoute path="/specificUrl" component={SpecificComponent} />
      ...
    </Switch>
  </Suspense>
);

我做错了什么？如果我将代码更改为：

if (authenticationStatus === AuthenticationStatus.SignedInNotInPilot) {
  return <Redirect to="/specificUrl" />;
  // return <Route exact path="/specificUrl" render={() => <Redirect to="/specificUrl" />} />;
}

我被重定向到/specificUrl，但SpecificComponent 没有加载。

但如果我将代码更改为 SpecificComponent 正在加载但我必须手动重定向：

if (authenticationStatus === AuthenticationStatus.SignedInNotInPilot) {
  return <Route exact path="/specificUrl" render={() => <SpecificComponent />} />;
  // return <Redirect to="/specificUrl" />;
  // return <Route exact path="/specificUrl" render={() => <Redirect to="/specificUrl" />} />;
}

【问题讨论】：

标签： reactjs redirect react-router react-router-dom

【解决方案1】：

您的第一个逻辑有效，但要重定向，您可以尝试将 { withRouter } 带出 react-router-dom，然后用它包装您的组件，同时像一个高阶组件一样导出。这将使您可以访问 history 道具，然后您可以使用 history 使用 history.push('/specificUrl') 进行重定向

import {withRouter} from 'react-router-dom'

const PrivateRoute: React.FC<PrivateRouteProps> = (props: PrivateRouteProps) => {
  const { authStatus, history } = props;
  ...
  if (authStatus === AuthStatus.SomeRole) {
    // conditional is working
    return <Route exact path="/specificUrl" render={() => history.push('/specificUrl') />} />;
    // or just history.push('/specificUrl') should work as well
  }
  ...
};

export default withRouter(PrivateRoute)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：