routen mit react-router-dom öffnet im übergeordneten container

Question

ich versuche mit react-router-dom arbeiten, aber ich kann nicht verstehen, wie definiere ich einen "main" container, der alle anderen komponenten innerhalb öffnet? in der alten Version I

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

zu tun verwendet und es würde wie Magie arbeitet, jetzt habe ich versucht, so etwas wie diese

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

Ich bin nicht sicher, wie die notfound Routen zu implementieren, aber in Mein letzter Versuch, die Routen zu bewältigen, die ich geschafft habe, sie innerhalb des Containers zu öffnen, aber ich bekomme auch diese Warnung The prop `children` is marked as required in `Main`, but its value is `undefined und ich frage mich, warum ich sie bekomme? Was mache ich falsch? und wie kann ich einstellen, dass jeder andere Weg (neben was definiert) wird umgeleitet „/“ (zu ShowsPage Komponente)

hier ist main.js (mein Hauptbehälter)

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; 

Dank!

Answer 1

Unter der Annahme, wollen ShowsPage, ticketsPage und ShowsPage innerhalb von Main Komponente zeigen. Sie haben diese Komponente Route innerhalb von Main Komponente setzen

hinzufügen history prop Router

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

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

die Strecke Kind Komponente Bewegen innerhalb von main (parent) Komponente.

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

sollte

<Route component={Main} /> 

Route hinzufügen in der Render-Methode von Main.Place sie in einem Switch (Import aus reagieren-Router-dom) sein, das Sie mögen diese

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