How to do nesting in react router?

Tell me how to work with nested pages in the router? I want the content inside the home was displayed on the link that is here home/services.

home and work contacts, a service gives blank page

Code for the component service
class MainBar extends Component {
render(){
return(
 <div classname="center_container">
 <route path="/service" component="{Service}">
</route></div>
)
}
}


The structure is this:

/home
/Services
/Contacts
June 3rd 19 at 21:04
2 answers
June 3rd 19 at 21:06
<route path="/home/services" component="{Service}"></route>
How can I be if I render a component inside another component?
ie service is being rendered inside the mainbody in the app - kristofer.Mante commented on June 3rd 19 at 21:09
in this case, it is necessary to use this.props.match.url:
<route path="{`${this.props.match.url}/services`}" component="{Service}"></route>

Demo - Lenny.Botsfo commented on June 3rd 19 at 21:12
June 3rd 19 at 21:08
You're in the console log looked mistakes? Can do here in the sandbox pour through codesandbox the same, will be faster.

And on the subject. You just write saying "I Etrangere this component, if there is a way /service", of course he can't on the home/service, it will only work at the path /service
Look at the dock match.url

https://reacttraining.com/react-router/web/example... Example is in the dock const Topics
match is prop Route - kristofer.Mante commented on June 3rd 19 at 21:11

Find more questions by tags React