Wie eine reagieren Komponente mit reagieren-Router

Question

grundsätzlich im Rendering diese reagieren Komponente ersetzen:

<Grid> 
    <Him className="him"><Link to="/him">Him</Link></Him> 
    <Her className="her"><Link to="/her">Her</Link></Her> 
    </Grid> 

im Wesentlichen nur 2 Boxen mit Links zu ihm und ihr.

Ich habe diese Route, die meine Kategorien richtig darstellt, wenn Sie auf ihn klicken.

<Route 
     path="/him" 
     render={() => (
      <Categories 
      products={products} 
      addToBasket={addToBasket} 
      /> 
     )} 
     /> 

Allerdings macht es diese Komponente unter den ihm/ihr Komponenten. Es klingt vielleicht albern, aber wie bekomme ich es, um sie übertrieben oder stattdessen zu rendern?

Ich könnte etwas, wo ich den Status der Komponente sichtbar machen: false und toggle, aber das scheint ein bisschen chaotisch.

alle Sachen in diesem Tutorial: https://reacttraining.com/react-router/web/example/no-match, scheint sie Routing über Header zu haben, die nie verschwindet, während ich auf Links im Körper meiner Anwendung klicken und dann anderen Inhalt zeigen möchte. irgendwelche Ideen?

Answer 1

Sie müssen das Gitter auch in eine Route einbinden.

const LinkComponent =() => (
    <Grid> 
    <Him className="him"><Link to="/him">Him</Link></Him> 
    <Her className="her"><Link to="/her">Her</Link></Her> 
    </Grid> 
); 

Auf diese Weise, wenn Sie zu Hause Weg zu gehen, sehen Sie die Grid, und wenn Sie auf einen Link klicken: Sie könnte so etwas wie dieses

<Route path='/' exact component={LinkComponent} /> 

Und woanders im Code tun Sie gehen zur entsprechenden Route und die Grid wird ausgeblendet.

Answer 2

Ok Sie will nur den gesamten Inhalt ersetzen, wenn Klick auf /him oder /her, so wie Xander Berkein sagte Sie Ihre Links in eine Hauptkomponente darstellen soll und es dann an die / Hauptroute zuweisen, y auf diese Weise die Sie benötigen verwenden exact prop zu machen, genau den ersten Pfad, der an die URL übereinstimmt, so

<Switch> 
<Route exact path={‘/‘} component={<Links/>} /> 
<Route exact path={‘/him’} component={<HimComponent/> /> 
<Route exact path={‘/her’} component={<HerComponent /> /> 
</Switch> 

ich Sie finden es nützlich hoffen.