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

Question

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

  <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

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

应该是

<Route component={Main} />

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

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

Answer 2

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

中

将 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>)
};

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

routes with react-router-dom opens in parent container

reactjs

react-router

react-router-dom