reactjs - 带有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>)
};