如果主要组件不是路由的一部分，为什么它会被渲染

Question

我有以下代码：

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

在 header 中，我包含了一个控制台日志，以查看 header 是否在 url 更改时重新呈现，确实如此。我的问题是：

为什么它在路由之外时会被渲染？

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>

在您的代码中，Primarylayout 位于 BrowserRouter 内。所以它是内部路由，而不是外部。
即使它不是您在 JSX 文件中定义的任何内容，只要它在渲染函数中。

如果您定义了路由器，那么任何有条件的 (Route) 都将有条件地呈现，即当 path 匹配时。条件标签之外的任何内容都将被渲染，就像任何普通组件一样。

如果主要组件不是路由的一部分，为什么它会被渲染

Why does the main component get rendered if its not part of the route

reactjs

react-router-v4