routes with react-router-dom opens in parent container

Question

I'm trying to work with react-router-dom but I can't understand how do I define a "main" container that will open all the other components inside ? in the old version I used to do

  <Router history={history}>
    <Route path="/" component={Main}>
      <IndexRoute component={ShowsPage} />

      <Route path="/shows" component={ShowsPage} />
      <Route path="/tickets" component={ticketsPage} />
    </Route>

    <Redirect from="*" to="/" />
  </Router>

and it would work like magic, now I tried something like this

<Router>
    <div>
        <Route component={Main}/>
        <Route path="/" exact component={ShowsPage}/>
        <Route path="/tickets" exact component={ticketsPage}/>
        <Route path="/shows" exact component={ShowsPage}/>
    </div>
</Router>

I'm not sure how to implement the notfound routes, but in my last attempt to handle the routes I managed to make them open inside the container but I do get also this warning The prop `children` is marked as required in `Main`, but its value is `undefined and I wonder why I get them ? what do I do wrong ? and how can I set that every other route(beside whats defined) will be redirected to "/" (to ShowsPage component)

here is Main.js (my main container)

import React from 'react';
import PropTypes from 'prop-types';

import HeaderContainer from './HeaderContainer';
import FooterContainer from './FooterContainer';

const Main = ({children}) => (
    <div>
        <container className="containerHeader">
            <HeaderContainer />
        </container>
        <container className="containerMain">
            {children}
        </container>
        <container className="containerFooter">
            <FooterContainer />
        </container>
    </div>
)

Main.propTypes = {
    children: PropTypes.object.isRequired,
}


export default Main;

thanks!

Answer 1

Assuming you want to show ShowsPage,ticketsPage and ShowsPage inside of Main component. You have to put these component route inside of Main component

Add history prop to Router

import createBrowserHistory from 'history/createBrowserHistory'
const browserHistory = createBrowserHistory();

<Router history={browserHistory}>
    <div>
        <Route path="/" component={Main} />
    </div>
</Router>

Move the child component route inside of main(parent) component.

const Main = ({ match }) => { //assume main component.
    return (<div>
        This is the Root component.
        <Route path={`${match.url}`} exact component={ShowsPage} ></Route>
        <Route path={`${match.url}tickets`} exact component={ticketsPage}></Route>
        <Route path={`${match.url}shows`} exact component={ShowsPage}></Route>
    </div>)
};

Answer 2

<Route component={Main}/>
<Route path="/" exact component={ShowsPage}/>
<Route path="/tickets" exact component={ticketsPage}/>
<Route path="/shows" exact component={ShowsPage}/>

should be

<Route component={Main} />

Add Route in the render method of Main.Place them inside a Switch (import from react-router-dom) like this

<Switch>
 <Route path="/" exact component={ShowsPage}/>
 <Route path="/tickets" exact component={ticketsPage}/>
 <Route path="/shows" exact component={ShowsPage}/>
</Switch>