Я хочу объявить путь с необязательным параметром пути, поэтому, когда я добавляю его, страница делает что-то дополнительное (например, заполняет некоторые данные):

http: // localhost / app / path / to / page <= отобразить страницу http: // localhost / app / path / to / page / pathParam <= отобразить страницу с некоторыми данными в соответствии с pathParam

В моем реагирующем маршрутизаторе у меня есть следующие пути для поддержки двух вариантов (это упрощенный пример):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Мой вопрос, можем ли мы объявить это по одному маршруту? Если я добавлю только вторую строку, маршрут без параметра не будет найден.

EDIT # 1:

Упомянутое здесь решение о следующем синтаксисе у меня не сработало, верно? Существует ли это в документации?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Моя версия реакции-маршрутизатора: 1.0.3

Размещенное вами изменение действительно для старой версии React-router (v0.13) и больше не работает.

React Router v1, v2 и v3

Начиная с версии 1.0.0вы определяете необязательные параметры с помощью:

<Route path="to/page(/:pathParam)" component={MyPage} />

и для нескольких необязательных параметров:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

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

Примечание: параметр соответствует сегменту URL до следующего , или . Подробнее о путях и параметрах читайте здесь .:paramName/?#

React Router v4 и выше

React Router v4 принципиально отличается от v1-v3, и необязательные параметры пути также явно не определены в официальной документации .

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

Таким образом, чтобы определить необязательный параметр, вы делаете:

<Route path="/to/page/:pathParam?" component={MyPage} />

и для нескольких необязательных параметров:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Примечание. React Router v4 несовместим среагирую-маршрутизатор-реле( читайте больше здесь ). Вместо этого используйте версию v3 или более раннюю (рекомендуется v2).

Для любых пользователей React Router v4, прибывающих сюда после поиска, необязательные параметры в a <Route>обозначаются ?суффиксом.

Вот соответствующая документация:

https://reacttraining.com/react-router/web/api/Route/path-string

путь: строка

Любой допустимый URL-путь, который понимает path-to-regexp .

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

По желанию

К параметрам можно добавить знак вопроса (?), Чтобы сделать параметр необязательным. Это также сделает префикс необязательным.

Простой пример разбитого на страницы раздела сайта, к которому можно получить доступ с номером страницы или без нее.

<Route path="/section/:page?" component={Section} />

Рабочий синтаксис для нескольких необязательных параметров:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Теперь URL может быть:

1. /раздел
2. / Раздел / стр / 1
3. / Раздел / страница / 1 / сортировать / по возрастанию

для реакции-маршрутизатора V5 и выше используйте синтаксис ниже для нескольких путей

<Route
          exact
          path={[path1, path2]}
          component={component}
        />