Разрешить косые черты в параметре маршрута в React

Question

У меня есть такой роутер:

<Route path="/blog/:date/:folder" render={(props: any) => <Home />

Он работает с этим:

http://localhost/blog/2017-05-20/test

Однако, :folder может иметь косые черты (sub-dir), и я хочуразбор всего пути сразу в папке.

Это не работает:

http://localhost/blog/2017-05-20/test/sub/dir

В этой ситуации я получаю только test.Я хочу получить :folder как test/sub/dir в целом.

Есть ли способ достичь этого с помощью React Router?

Ожидается :

:date => '2017-05-20'
:folder => 'test/sub/dir'

Фактический:

:date => '2017-05-20'
:folder => 'test'

Answer 1

Да, вы можете сделать это, добавив + к вашему маршруту.Итак, вот так:

<Route path="/blog/:date/:folder+" ... />

Эта библиотека используется для сопоставления пути.Так что для более сложных случаев сопоставления это лучшее место, чем документы React Router.

Answer 2

Вы можете рекурсивно встраивать компоненты, если они визуализируются Маршрутом - тогда вы можете проверить this.props.match для имени пути, например, в базовом Маршрутизаторе у вас будет базовый маршрут, /blog/:date, который рендеринг компонента Home.

Затем внутри компонента Home вы можете визуализировать другой маршрут (он все еще работает отсюда, несмотря на то, что он не является непосредственным дочерним элементом маршрутизатора) с настройкой, подобной

<Route path={`${this.props.match.url}/:folder`} component={Folder} />

Затем внутри компонента Folder вы будете отображать тот же маршрут, который будет постепенно отображать подкомпоненты для каждого /:folder в пути.

Объект match также включает в себя isExact, который можно использовать для определения того, находитесь ли вы на последнем уровне структуры папок по URL-адресу.

Источник: см. этот пример встроенных маршрутов.