React 一直在重新渲染导航栏

Question

首先我认为这是一个身份验证问题，正如我一周前在另一篇文章中所说的那样，但现在我尝试做一个简单的导航栏，上面没有任何复杂的代码

class App extends Component {


render() {
return (
      <div>
      <Navigation/>
      <BrowserRouter/>
      <Route exact path= '/' component={Home}/>
      <Route exact path= '/Account' component={Account}/>
      <Route exact path= '/Users' component={Users}/>
      <BrowserRouter/>
      </div>

);
    }
}

导出默认应用；

const Navigation = () =>

<NavigationNonAuth/>


const NavigationNonAuth = () =>

<Navbar inverse collapseOnSelect>
 <Navbar.Header>
  <Navbar.Brand>
    <a href='/'>Refactoring</a>
  </Navbar.Brand>
 <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
 <Nav pullRight>
  <NavItem eventKey={1} href='/Account'>
    Account
  </NavItem>
  <NavItem eventKey={2} href='/Users'>
   Users
  </NavItem>
 </Nav>
 </Navbar.Collapse>
 </Navbar>
 export default Navigation;

每次我点击导航器、/、/Account 或 /Users 的任何链接时，导航栏都会再次呈现，它不应该

我在 index.js 上使用这个路由

ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));

为什么每次点击导航href链接后都会渲染导航栏？

Answer 1

看上面有几个问题，首先你使用了两次<BrowserHistory/>，这是一个反模式。您只需要将<BrowserHistory/> 放在应用程序的顶层即可。

其次，<BrowserHistory/> 是一个 HOC，它将道具附加到您的 <App/> 组件，例如history、location & match。因为您的 <App/> 是 React.Component 而不是 React.PureComponent 每次这些道具之一更改时，您的 <App /> 被重新渲染，再次呈现您 <Navigation/>。

history、location 和 match 会随着路线的变化而变化。

解决方案

1. 去掉下方的<BrowserHistory />就不需要了
2. 将<App /> 组件更改为React.PureComponent
3. 将history 属性传递给<Navigation history={this.props.history}/> 组件
4. 将您的 <NavItem href='/Users' /> 更改为使用历史记录的 onClick 事件，例如<NavItem onClick={() => this.props.history.push('/Users')} />

终于阅读React.PureComponent

https://reactjs.org/docs/react-api.html#reactpurecomponent