Bedingtes Rendering mit React Router

Question

Ich möchte einige Routen mit einem Nav am oberen Rand rendern, während andere Routen (wie eine Anmeldungs-/Anmeldeseite) ohne Nav dargestellt werden.

Für den Aufbau mit dem nav, ich habe:

const App =() => (
    <Router> 
    <div> 
     <Nav /> 
     <div> 
     <Route exact path="/" component={Home} /> 
     <Route path="/account" component={Account} /> 
     <Route path="/news" component={News} /> 
     </div> 
     <Footer /> 
    </div> 
    </Router> 
); 

Ich versuche, die beste Art und Weise der Handhabung dieses mit Router Reagieren zu finden (scheint, wie es gehandhabt würde mit Irgendeine Art von bedingten vielleicht? - "Wenn meine aktuelle Route mit einer dieser Routen übereinstimmt, dann render wie sonst rendern dies.").

Danke!

Answer 1

Sie haben mindestens zwei Möglichkeiten:

1. Verwenden Route „Pfad“ Eigenschaft, um die Strecke zu testen und die Komponente zu machen. Die Pfadeigenschaft akzeptiert path.to.regexp Ausdrücke.
2. Wickeln Sie Ihre Komponente mit withRouter Methode und innerhalb Nav testen Sie, ob die Route übereinstimmt und null ansonsten Rendern.

Erste Antwort:

const App =() => (
    <Router> 
    <div> 
     <Route path="/(?!signin|signup)" component={Nav}/> 
     <div> 
     <Route exact path="/" component={Home} /> 
     <Route path="/account" component={Account} /> 
     <Route path="/news" component={News} /> 
     </div> 
     <Footer /> 
    </div> 
    </Router> 
); 

Zweite Antwort:

import { withRouter } from 'react-router' 
const NavWithRouter = withRouter(Nav); 

const App =() => (
    <Router> 
    <div> 
     <NavWithRouter/> 
     <div> 
     <Route exact path="/" component={Home} /> 
     <Route path="/account" component={Account} /> 
     <Route path="/news" component={News} /> 
     </div> 
     <Footer /> 
    </div> 
    </Router> 
); 

Answer 2

Nur eine Stütze verwenden für diese & innerhalb der Kinder Ihre Lage sind, bedingte die nav machen.

<Route exact path="/" render={() => <Home hasNav={false} />}