it-roy-ru.com

React Маршрутизатор с необязательным параметром пути

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

http: // localhost/app/path/to/page <= отобразить страницу http: // localhost/app/path/to/page/pathParam <= render страница с некоторыми данными в соответствии с 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

245
tbo

Размещенное вами изменение действительно для более старой версии 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} />

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

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


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 имеет вид несовместимо с response-router-relay ( подробнее здесь ). Вместо этого используйте версию v3 или более раннюю (рекомендуется v2).

523
Chris

Для любых React пользователей Router v4, прибывающих сюда после поиска, необязательные параметры в <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} />
63
John