How to render a common template for pages in React Router?

Question

React

Good afternoon, There is a site frame in the MainLayout component that accepts {this.props.children} It was possible to nest in the react-router
libraries , as you can see, I create a Route and specify the MainLayout template for it and all the descendants that will be specified in it will be transferred like {this.props.children} . How to do the same in the react-router-dom library ?

ReactDOM.render((
  <Router>
    <Route component={MainLayout}>
      <Route path="/" component={Home} />
      <Route component={SearchLayout}>
        <Route path="users" component={UserList} />
        <Route path="widgets" component={WidgetList} />
      </Route> 
    </Route>
  </Router>
), document.getElementById('root'));

Answer 1

it’s not very clear why you need routes without paths
, maybe mainlayout and searchlayout should take the necessary components into themselves through props?
or just make divs with the necessary styles and put routes in them)