reactjs - React-router：防止在公共布局上重定向

Question

我继承了一些具有公共和私有布局的代码。我需要公共布局上的登录页面，该页面可用于从外部 API 为没有登录权限的用户接收信息。

我添加了一个 Switch 组件和公共布局的路由，它可以工作，除了页面在处理后几乎立即被重定向。如何防止这种重定向？

编辑：我怀疑“/”路由内的重定向功能会立即触发，尽管不在匹配的路由上。我的临时解决方案是将其移动到另一个组件中，并在加载时触发该功能，但这可能不是修复它的最佳方法。还有其他建议吗？

这是 App.js：

function App(props) {

  if (!props.isAuthenticated && props.attemptAutoAuthenticate && !props.isAuthenticating ){
    props.doAttemptAutoAuth()
  }

  var domElement = null;
  if(!props.isAuthenticated && props.attemptAutoAuthenticate) {
    domElement = <Loader />
  }
  else if(props.isAuthenticated) {
    domElement = <PrivateLayout {...props} />
  } else {
    domElement = <PublicLayout {...props} />
  }

  return (
    <div className="App">
      {domElement}
    </div>
  );
}

export default App;

公共布局.js：

function Layout(props) {
  const { doLogout } = props;

  return (
    <section className="section is-medium">
      <div className="container">
        {
          props.loginError === "USER_MISSING_PERMISSIONS" ?
          <div>
            <ErrorBlock messageId="Auth.error.missingPermissions" isVisible={true}/>
            <NavLink to="#" tabIndex="1" onClick={() => doLogout()}>
              <FormattedMessage id="signout.actions.submit" />
            </NavLink>
          </div> :
          <Switch>
            <Route path="/public-route-that-should-be-visible">
              <ComponentThatShouldBeVisible />
            </Route>
            <Route exact path="/">
              { redirector.redirectToAuthLogin() }
            </Route>
            <Route path="*">
              <Redirect to="/"/>
            </Route>d
          </Switch>
        }
      </div>
    </section>
  )
}

export default Layout;

组件.js：

const Component = (props) => {
  \\ props & logic & stuff

  if (!props){
    return "Missing required parameters."
  }
  if (success){
    return <div>Success!</div>
  }
  if (fail){
    return  <div>There was an error</div>
  }
  return <Loader/>
};

标签： reactjsreact-router