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的任何链接时，navBar都会再次呈现，而不会呈现

我在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都会改变。

解决方案

删除不需要的下<BrowserHistory />
将<App />组件更改为React.PureComponent
将history道具传递到<Navigation history={this.props.history}/>组件
使用历史记录将<NavItem href='/Users' />更改为onClick事件，例如<NavItem onClick={() => this.props.history.push('/Users')} />

最后阅读React.PureComponent

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

React一直在重新渲染导航栏

1 个答案: