Блог

Я унаследовал некоторый код, который имеет общедоступный и приватный макет. Мне нужна целевая страница в общедоступном макете, которую можно использовать для получения информации из внешнего API для пользователей, у которых нет прав на вход.

Я добавил компонент переключения и маршрут к общедоступному макету, и это работает, за исключением того, что страница перенаправляется почти сразу после обработки. Как мне предотвратить это перенаправление?

Редактировать: я подозреваю, что функция перенаправления внутри маршрута «/» запускается немедленно, несмотря на то, что она не находится на соответствующем маршруте. Мое временное решение состоит в том, чтобы переместить его внутрь другого компонента, чтобы эта функция запускалась при загрузке, но это может быть не лучшим способом исправить это. Есть еще какие-нибудь предложения?

Вот App.js:

 function App(props) {

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

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

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

export default App;
 

Общедоступный Layout.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;
 

Component.js:

 const Component = (props) => {
  \ props amp; logic amp; stuff

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