React Router Dom дочерние маршруты

Question

Я создаю небольшое приложение реакции, в котором я разместил маршруты в компоненте root следующим образом:

return (
    <div>
        <Header />
        <Route exact path='/' component={Homepage}/>
        <Route exact path='/shop' component={Shop}/>
        <Route exact path='/shop/:category' component={Category}/>
    </div>
)

Я хочу разместить маршрут /shop/:category как дочерний маршрут в компоненте Shop как ниже

render() {
    const {match} = this.props
        return (
            <div>
                <Route exact path={`${match.path}`} component={Collection}/>
                <Route exact path={`${match.path}/:category`} component={Category}/>
            </div>
        )
    }

Когда я делаю это, компонент категории просто не рендерится, но он рендерит, когда я помещаю маршрут в компонент приложения, который он рендерит. Я зарегистрировал объект соответствия, и это нормально, потому что даже страница Коллекции, которая использует то же самое, выполняет рендеринг, но по любой причине второй маршрут просто не будет отображаться.

Answer 1

Атрибут

exact делает визуализацию маршрута ТОЛЬКО, если текущий путь местоположения совпадает с предоставленным атрибутом path.

Когда текущий путь местоположения находится в /shop/:category, он не будет отображать <Route exact path='/shop' component={Shop}/> потому что /shop/:category !== /shop

Попробуйте удалить атрибут exact для компонента, который имеет под маршруты внутри

      <div>
        <Header />
        <Route exact path='/' component={Homepage}/>
        <Route path='/shop' component={Shop}/>
      </div>