React router с условиями

Мой реагирующий компонент выглядит так:

 class App extends React.Component {  
  render() {
    debugger;
    if(!this.props.isUserExist) {
      return (
        <div>
          <Route exact path="/" component={DashboardPage} />
        </div>
      );
    }
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}

Мой вопрос: есть ли лучший способ проверить эти условия с помощью реагирующего маршрутизатора v4? это лучший способ проверить эти условия? Это лучшая практика? Пожалуйста, помогите мне с этим!


reactjs javascript redux react-redux react-router
person Dayan    schedule 25.05.2018    source источник
comment
Возможный дубликат простой условной маршрутизации в Reactjs   -  person John Samuel    schedule 25.05.2018
comment
спасибо @johnsam, что, если я хочу отправить маршрут в разные компоненты. например, когда пользователь существует ‹Точный путь=/компонент={HomePage} /› и когда пользователь не существует ‹Точный путь=/компонент={DashboardPage} /›?   -  person Dayan    schedule 25.05.2018
comment
удачного кодирования :D   -  person John Samuel    schedule 25.05.2018
comment
@johnsam, надеюсь, ты понял вопрос?   -  person Dayan    schedule 25.05.2018
comment
это правильный путь?   -  person Dayan    schedule 25.05.2018
comment
Даян. В вашем примере вы можете просто использовать тройное условие в своем случае. <Route exact path="/" component={this.props.isUserExist ? DashboardPage : HomePage} />. Ваш случай не находится внутри коммутатора и не будет следовать правилам отката к странице notfound для вошедших в систему пользователей. Для более сложных сценариев проверьте ответ ниже.   -  person Vlatko Vlahek    schedule 25.05.2018
comment
Пожалуйста, ребята, не голосуйте против вопроса. Для кого-то это может быть глупый вопрос, но не для меня. Я все еще новичок и стараюсь уложиться в сроки на работе. В любом случае спасибо всем за помощь.   -  person Dayan    schedule 26.05.2018

Ответы (2)


arrow_upward
7
arrow_downward

Более простым способом для отдельных путей вы можете воспользоваться,

<Route exact path="/" component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} />
person Rohith Murali    schedule 25.05.2018
comment
Зачем это делать? - person Rob; 25.05.2018
comment
Я имею в виду, что это можно сделать и так... Условие можно указать непосредственно перед выбором компонента. - person Rohith Murali; 25.05.2018
comment
@RohithMurali Я пробовал это, но он показывает Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports., но компонент отображается при передаче в качестве реквизита компонента. - person PrivateOmega; 12.07.2019
comment
@PrivateOmega Вы уверены, что сделали component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>}, а не component={this.props.isUserExist?<HomePage/> : <Dashboard/>}. Потому что сама ошибка говорит expected a string or a class/function - person Rohith Murali; 12.07.2019
comment
@RohithMurali да, проверка условия находится внутри функции. render={() => currentUser.roles.includes('admin') ? <AdminHomePage /> : <UserHomePage />} Не вижу в этом проблемы. - person PrivateOmega; 12.07.2019
comment
@PrivateOmega render?? - person Rohith Murali; 12.07.2019
comment
Блин, я не заметил такой огромной разницы. Так как это отличается?. Спасибо чувак - person PrivateOmega; 12.07.2019

arrow_upward
4
arrow_downward

Короче говоря, в React Router нет специального решения для этого сценария. Он достаточно легкий, чтобы позволить разработчику решить, какой вариант будет лучшим.

Долгая история, это зависит. Если вы ожидаете, что код должен иметь общие маршруты, которых нет в этом примере, может быть удобнее использовать встроенный Javascript и оператор (&&). Например:

class App extends React.Component {  
  render() {
    return (
      <div>
        <Switch>
          {this.props.isUserExist && 
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          }
          <Route exact path="/dashboard" component={DashboardPage} />
          <Route component={NotFoundPage} />
        </Switch>

      </div>
    );
  }
}

В рамках этого примера (Панель инструментов доступна только для вышедших из системы пользователей, не найденная страница доступна только для вошедших в систему пользователей) ваш пример демонстрирует концепцию раннего возврата, что является хорошим шаблоном. Это способ избежать написания else и указать, что такое основной путь кода (пользователь аутентифицирован) и каков случайный путь кода (пользователь не аутентифицирован). Подробнее о досрочном возвращении читайте здесь.

Есть и другие идеи, такие как создание собственного пользовательского PrivateRoute. Пример этой идеи демонстрируется здесь.

person Karamell    schedule 25.05.2018
comment
@dayan Сценарий частного маршрута здесь - отличный способ использовать ваш вариант использования. - person Vlatko Vlahek; 25.05.2018