带有 react-router-dom 的路由在父容器中打开

Question

我正在尝试使用 react-router-dom 但我不明白如何定义一个“主”容器来打开里面的所有其他组件？ 在我以前做的旧版本中

  <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>

它会像魔术一样工作，现在我尝试了这样的事情

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

我不确定如何实现未找到的路由，但在我最后一次尝试处理路由时，我设法让它们在容器内打开，但我也收到了这个警告The prop `children` is marked as required in `Main`, but its value is `undefined，我想知道为什么我会得到它们?我做错了什么？以及如何设置所有其他路由（除了定义的）将被重定向到“/”（到 ShowsPage 组件）

这里是 Main.js（我的主容器）

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;

谢谢！

Answer 1

假设您想在Main 组件内显示ShowsPage、ticketsPage 和ShowsPage。 您必须将这些组件路由放在Main 组件内

将history 属性添加到Router

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

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

将子组件路由移动到主（父）组件内。

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}/>

应该是

<Route component={Main} />

在 Main 的渲染方法中添加路由。像这样将它们放在 Switch 中（从 react-router-dom 导入）

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