Как отобразить вложенные маршруты с несколькими необязательными параметрами и местозаполнителями пути?

Question

Я пытался использовать react-router для определения серии вложенных компонентов / маршрутов с необязательными параметрами, но также разделенных путями-заполнителями.

т.е.

/list
/list/1
/list/items
/list/1/items
/list/1/items/1

Я бы предположил, что два <Route> пути будут выглядеть примерно так:

/list/:listId?
and
`${match.url}`/items/:itemId?`

Но, увы ... "items" всегда заканчивается тем, что его принимают в качестве параметра listId, и, следовательно, суб-маршрутизация для/items никогда не совпадает.

У меня есть общий пример, который я здесь кодировал (решение не достигнуто): https://stackblitz.com/edit/nesting-w-optional-params-react-router

Я вижу примеры по всему Интернету для /root/:id1?/:id2? но ничего для того, что я пытаюсь сделать, где у меня есть заполнитель между параметрами: /root/:id1/placeholder/:id2.

Можно ли это сделать w / react-router v4 + ??

Answer 1

Выяснил решение, использующее шаблон RR children, чтобы всегда отображал вложенный маршрут / компонент, но затем внутри компонента используйте path-to-regexp непосредственно для сопоставления маршрута и получения соответствующих параметров маршрута изprops.location.pathname.

Соответствующий бит кода:

render() {
    const pathRe = new PathToRegexp('/foo/:fooId?/bar/:barId?')
    const match = pathRe.match(this.props.location.pathname)
    if (!match) {
      return null
    }
    const barId = (this.props.match && this.props.match.params.barId) || match.barId
    return <h1>Bar <em>{barId}</em></h1>
  }

https://stackblitz.com/edit/nesting-w-optional-params-react-router-solution