React-Router: Как условно перенаправить Route на другой URL?

Question

Использование React Route, но я сталкиваюсь с этой проблемой: при определенных условиях мне нужно, чтобы приложение загружало URL-адрес, отличный от точного. Вот что я сделал:

class Application extends React.Component {
  render() {
    const { history } = this.props;
    let loadExact = true;

    if (my_condition === true) {
      loadExact = false;
    }

    return (
      <Dashboard history={history}>
        <Switch>
          {
           loadExact ? <Route exact path="/app" component={MainPage} /> : 
           (
              <Redirect to={{
                  pathname: "/app/theotherpage",
                  state: {from: history}
                }} 
              />
           )
          }

          <Route path="/app/theotherpage" component={TheOtherPage} />

          <Route component={NotFound} />
        </Switch>
      </Dashboard>
    );
  }
}

Что мне нужно, если loadExact равно false, затем перенаправить на /app/theotherpage и, следовательно, загрузить его вместо /app. Таким образом, он переходит на полностью пустую страницу и сообщает мне:

Невозможно выполнить обновление состояния React для неустановленного компонента. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

Как мне решить эту проблему?

Answer 1

вы можете передать реквизиты loadExact вашему компоненту MainPage, а затем перенаправить внутри этого компонента, когда propsloadExact имеет значение false.

<Route
  path='/app'
  render={(props) => <MainPage {...props} loadExact={loadExact} />}
/>

Answer 2

Как Прака sh Редди Потлападу предложил, я использовал history.push. Вот код:

componentDidMount() {
   if (my_condition) {
      history.push("/app/theotherpage");
   }
}

И это все. Работал как шарм.

Answer 3

Есть два способа сделать это:

1. Через перенаправление вне <Switch>

   if (my_condition === true) {loadExact = false; loadComp =; }

   return (
     <Dashboard history={history}>
      {loadComp}
       <Switch>
         <Route exact path="/app" component={MainPage} />
         <Route path="/app/theotherpage" component={TheOtherPage} />
         <Route component={NotFound} />
       </Switch>
     </Dashboard>
   );
   

   }}

2. Через history.pu sh

   `класс Приложение расширяет React.Component {render () {const {history} = this.props; let loadExact = true;

   if (my_condition === true) {
     loadExact = false;
     this.props.history.push('/app/theotherpage');
   }
   
   return (
     <Dashboard history={history}>
       <Switch>
         <Route exact path="/app" component={MainPage} />
         <Route path="/app/theotherpage" component={TheOtherPage} />
         <Route component={NotFound} />
       </Switch>
     </Dashboard>
   );
   

   }} `