Pourquoi le composant principal se rendu si sa ne fait pas partie de la route

Question

Je le code suivant:

import React from 'react' 
import { BrowserRouter, Route, Link } from 'react-router-dom' 

const PrimaryLayout =() => (
    <div className="primary-layout"> 
    <header> 
    {console.log("homepage")} 
     Our React Router 4 App <Link to='/'>Home</Link> <Link to='/users'>Users</Link> 
    </header> 
    <main> 
     <Route path="/" exact component={HomePage} /> 
     <Route path="/users" component={UsersPage} /> 
    </main> 
    </div> 
) 

const HomePage =() => <div>Home Page</div> 
const UsersPage =() => <div>Users Page</div> 

class App extends React.Component { 
    render() { 
    return(
     <BrowserRouter> 
     <PrimaryLayout /> 
    </BrowserRouter> 
    ) 
    } 
} 

export default App 

dans l'en-tête que j'ai inclus un journal de la console pour voir si l'en-tête se nouveau rendu lorsque l'URL change , Cela fait. ma question est la suivante:

Pourquoi est-il rendu quand il est hors du routage?

Answer 1

<div className="primary-layout"> 
<header />          //Render always 
<main> 
    <Route path="/" exact component={HomePage} /> // Render only when path is/
    <Route path="/users" component={UsersPage} /> // Render only when path is /users 
</main> 

1. Dans votre code, le Primarylayout tombe à l'intérieur du BrowserRouter. Donc, il est à l'intérieur le routage, pas à l'extérieur.

2. Même si ce n'est pas ce que vous définissez dans le fichier JSX sera rendu, tant qu'il est dans la fonction de rendu.

Si vous avez un routeur défini, quel que soit conditionnel (Route) sera rendu sous condition à savoir quand le match de la path. Tout ce qui est en dehors des balises conditionnelles sera rendu de toute façon, comme tout élément normal.