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> 

を行うために使用し、それが魔法のように働くだろう、今私はNOTFOUNDルートを実装するかどうかはわかりません。この

<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と私はなぜそれらを得るのだろうか？私は何が間違っていますか？そしてどのように私は他のすべてのルートが（いただきましそばに定義された）に「/」

ここ

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

おかげで（ShowsPageコンポーネントに）リダイレクトされることを設定することができます！

Answer 1

のようなスイッチ（反応-ルータ-DOMからのインポート）内部Main.Placeそれらのrenderメソッドでルートを追加する必要がありますShowsPage、ticketsPage、ShowsPageをMainの中に表示します。 あなたがMainコンポーネントの内部でこれらのコンポーネントルートを配置する必要があり

Router

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

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

にhistory小道具を追加するメイン（親）コンポーネントの内側の子コンポーネントのルートを移動します。

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

あなたと仮定すると、この

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