Как правильно сделать вложенность в react router?

Question

[rsoinvi]

Подскажите как работать со вложенными страничками в роутере? Хочу чтобы контент внтури home отображался по ссылке то есть вот так home/services.

home и contacts работают, a service выдает пустую страничку

Код для компонента service

class MainBar extends Component {
  render(){
    return(
      <div className="center_container">
        <Route path="/service" component={Service} />
      </div>
    )
  }
}

Структура такая:

/home
   /Services
/Contacts

Answer 1

[Антон Спирин]

<Route path="/home/services" component={Service} />

Comments

[rsoinvi]

А как мне быть если у меня компонент рендерится внутри другого компонента?
тоесть service рендерится внутри mainbody в app

[Антон Спирин]

rsoinvi, в таком случае надо использовать this.props.match.url:

<Route path={`${this.props.match.url}/services`} component={Service} />

Демо

Answer 2

[jondoeonoe]

Ты в консоль лог смотрел, ошибки? Можешь вообще сюда в песочнице залить, через codesandbox тот же, будет быстрее.

А по теме. Ты же просто пишешь мол "Отрендери мне этот компонент, если будет путь /service", конечно он не сможет на home/service, он будет работать только по пути /service
Смотри в доке match.url

https://reacttraining.com/react-router/web/example... Пример же есть в доке const Topics

Comments

[jondoeonoe]

match - это проп Route