Cacher des composants avec un routeur de réaction

Question

Je commence tout juste avec React.js et j'ai une question sur le routeur de réaction. En particulier, je suis un peu confus au sujet de ce que cela signifie d'avoir des routes imbriquées dans le routeur de réaction. Supposons que je le code suivant (extrait de la page GitHub de réagir-routeur)

<Router> 
    <Route path="/" component={App}> 
    {/* Show the dashboard at/*/} 
    <IndexRoute component={Dashboard} /> 
    <Route path="about" component={About} /> 
    <Route path="inbox" component={Inbox}> 
     <Route path="messages/:id" component={Message} /> 
    </Route> 
    </Route> 
</Router> 

Alors ce qui arrive quand je vais le lien /inbox/messages/<id> ne le composant boîte de réception seront cachés? Quelles vues se cachent quand vous allez sur un lien de routeur et lesquelles restent en vue? Aussi, comment pouvez-vous garder la trace des composants qui sont cachés et qui ne le sont pas?

Merci!

Answer 1

Le composant inbox est le composant parent

const Inbox = ({ children }) => (
    <div> 
    <MessageList /> 
    { children } 
    </div> 
) 

const Message = ({ content }) => (
    <div> 
    { content } 
    </div> 
) 

Alors vous allez toujours voir le MessageList de toute voie inbox. Est ce que ça aide?

Answer 2

À moins que vous utilisez <Switch> (que vous pouvez utiliser en enveloppant autour de vos <Route> s comme un <Div>), routeur affiche réagir les composants imbriqués inclusivement. En d'autres termes, dans votre exemple, le message sera affiché à l'intérieur de la boîte de réception, les deux étant affichés en même temps.

<Switch>, d'autre part, fera en sorte que seul le premier correspondant <Route> sera affiché, de sorte que seule la boîte de réception serait affichée dans votre exemple. C'est une façon de "cacher" des éléments que vous ne voulez pas voir.