Reagieren Router v4 - Seite Zusammensetzung

Question

Hier ist, was ich umsetzen will:

Im Fall von /event und /customercenter, die header und footer gezeigt und nur der Inhalt des main Tages geändert. Die Seiten /login und /register zeigen die Kopf- und Fußzeile nicht an.

Zunächst einmal ist die Seitenzusammensetzung meiner Website wie folgt.

/
-/Ereignis
-/KundenCenter
/login
/registrieren

ich scheine nicht, das Problem zu lösen, weil ich denke, dass ich das passende bin Missverständnis .

Wenn man betritt die /event Seite, / war im Grunde ein Spiel, so dass ich dachte, dass die in / gemacht Komponente gezogen werden würde.

So /, /login und /register verwenden switch und exact verzweigt, und die Seiten unter / gerendert werden sollen, einfach in Form von <Route path = {...} component = {...} konfiguriert.

Um dies zu realisieren, habe ich versucht, es zu implementieren, indem Sie in der Stapelüberlauf auf andere Artikel Bezug genommen wird, aber aus irgendeinem Grund kann der Router keine Komponenten aus /register und /login fangen (anstatt, es gibt null).

Auf den Punkt gebracht:

• erwartete Ergebnis: keine Kopf- und Fußzeile auf /login und /register
• aktuelle Ergebnis: /login und /register ohne passende compoennt mit Kopf- und Fußzeilen.

finden meine vereinfachte Code:

---

index.js

ReactDOM.render(
    <Router> 
     <App /> 
    </Router> 
, document.getElementById('root')); 

---

App.js

Um /login und /register vermeiden passender / Ich verwendete exact. Aber es hat nichts gepasst.

---

Startseite.js

class Home extends Component { 
    render() { 
     return (
      <div className="App"> 
      <MainHeader /> 
      <AwesomeRouter /> 
      <Footer/> 
      </div> 
     ); 
    } 
} 

---

router.js

class AwesomeRouter extends Component { 
    render() { 
     return (
      <div> 
       <Route path='/event' component={Event}/> 
       <Route path='/customercenter' component={CustomerCenter}/> 
      </div> 
     ); 
    } 
} 

Answer 1

Sie können den '/' Pfad zum Ende der Liste bewegen und genaue aus den Routen entfernen.

Deshalb, wenn '/ login' und '/ Register' nicht übereinstimmen, dann '/' passt auf:

<Switch> 
    <Route path="/login" component={Login} /> 
    <Route path="/register" component={Register} /> 
    <Route path="/" component={Home}/> 
</Switch> 

Ihre '/ Veranstaltung' und '/ KundenCenter' Routen werden dann passen auch '/' als nicht genau übereinstimmen.