Question

我正在构建一个小项目来测试React Router 4.到目前为止，我的url更新，我的props.locations显示withRouter。但我似乎无法在props.location上更改我的navBar基础。

这就是我的路线的样子：

<Provider store={ store }>
   <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}>
      <div className="root">
      <App/>
      <Switch>
        <Route exact path="/" component={HomePageContainer}/>
        <Route eact path="/signin" component={SignInContainer}/>
        <Route eact path="/reviews" component={Reviews}/>
        <Route path="/favorites" component={Favorites}/>
        <Route render={() => (
          <p>Page Not Found</p>
        )}/>
      </Switch>
    </div>
  </BrowserRouter>
</Provider>

我的组件基本上包含我的HeaderBar和navBar，我在navBar中有消息，我想要更改，所以我会有页面的标题，我的应用程序看起来像这样：

const App = (props) => {
  let toRender = null;
  if(props.location.pathname !== '/signin'){
    toRender = (
      <div>
        <HeaderContainer />
        <NavBarContainer />
      </div>
    );
  } else {
    toRender = null;
  }

  return(
    <div className="App">
      { toRender }
    </div>
  );
}

我可以将我的navBar容器导入到我对'/'，'/ reviews'和'/ favorites'的每条路线中。但我不认为这是一种模块化的方式。我在NavBar中也有一个shouldComponentUpdate生命周期方法，我测试了一个console.log，当我切换url时它会更新，但事实并非如此。有没有人对干净的解决方案有任何建议，将道具传递给我的NavBar而不将其导入到每一个组件中？我也尝试将App组件放在Route的位置，所以我会：

<App exact path="/" component={HomePageContainer}/>
<Route eact path="/signin" component={SignInContainer}/>
<App eact path="/reviews" component={Reviews}/>
<App path="/favorites" component={Favorites}/>

但是我的组件除了App之外没有渲染。我不确定发生了什么或为什么它不渲染组件。任何建议都会非常感激。谢谢。

React Router 4 Navbar道具不更新

0 个答案: