Reaction-router-dom: Как настроить маршрут так, чтобы он отображал компонент на любом из двух путей?

Question

В моем текущем проекте у меня есть компонент <Header />, который я хотел бы визуализировать, только когда пользователь просматривает страницы в «/ library» или «/ admin».Я чувствую себя несколько озадаченным, потому что я следую примеру, приведенному в документации, здесь , но я получаю сообщение об ошибке в консоли, когда я делаю это.

Мой маршрут записывается какследующим образом:

<Route
  path={['/admin', '/library']}
  render={props => (
    <Header {...props} />
  )}
/>

Это работает, компонент <Header /> будет отображаться только при совпадении с этими путями, но я все еще вижу следующую ошибку в консоли:

Предупреждение: Ошибка типа проп: Недопустимый объект path типа array, предоставленный Route, ожидаемый string.

Учитывая, что я соответствую примеру в документации, яУдивлен, что я получаю вышеуказанную ошибку.Есть ли что-то, что я не правильно понимаю?Это основная часть того, что я нахожу настолько озадачивающим, и это заставляет меня задуматься, не делаю ли я что-то не так, тем более что, несмотря на сообщение об ошибке, мой код работает, как и ожидалось.

Я использую React v16.6и response-router-dom v4.3.1.

Answer 1

Как вы уже упоминали, когда вы пытаетесь выполнить настройку, вы видите, что она действительно работает.Вы получаете это предупреждение из-за типов опоры.Полагаю, решено в версии 4.4.0-бета.4.Эта версия также решает некоторые другие проблемы, и приведенная выше ссылка на самом деле упоминает эти проблемы.

Итак, попробуйте обновить до next:

yarn add react-router-dom@next react-router@next  

Answer 2

Сообщение об ошибке говорит вам, что путь не принимает массив, только строку.

Чтобы сделать то, что вам нужно, просто создайте 2 записи маршрута, как это

<Route
  path={'/admin'}
  render={props => (
    <Header {...props} />
  )}
/>
<Route
  path={'/library'}
  render={props => (
    <Header {...props} />
  )}
/>