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

在标题中我已经包含了一个控制台日志，以查看当网址更改时标题是否被重新呈现，确实如此。我的问题是：

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

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匹配时。无论如何，无论如何都会呈现条件标记之外的任何内容，就像任何正常的组件一样。

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

1 个答案: