react Router verschachtelte Komponenten Ausgabe

Question

Ich habe den folgenden Code -

class App extends Component { 
    render() { 
     return (
      <Router> 
       <Switch> 
         <MainPage> 
          <Route exact path="user" component={Error}/> 
         </MainPage> 
       </Switch> 
      </Router> 
     ) 
    } 
} 

Gerade jetzt Mainpage für jede URL gerendert wird, die ich verstehen, warum, aber können sagen, dass ich es nur für bestimmte Seiten sein wollen, machen . Wie kann ich es wickeln, um es zu erledigen?

Answer 1

Angenommen, Sie Mainpage für /user und /member, zeigen wollen, während /anonymous wird ohne Mainpage angezeigt:

class App extends Component { 
    render() { 
     return (
      <Router> 
       <Switch> 
        <Route path="/anonymous" component={Anonymous} /> 
        <Route path="/" component={MainPage} /> 
       </Switch> 
      </Router> 
     ) 
    } 
} 

class MainPage extends Component { 
    render() { 
    return (
     <div> 
     .... // place your original code to print the `MainPage` here 

     <Route path="/user" component={User}/> 
     <Route path="/member" component={Member}/> 
     </div> 
    ) 
    } 
}