React Router 为所有路由显示一个组件（标题）答案

【问题标题】：React Router display one component for all routes ( a header)React Router 为所有路由显示一个组件（标题）
【发布时间】：2017-10-18 10:00:05
【问题描述】：

有一个关于反应路由器的问题。

我有一个标题项，我想为所有路线显示。当然，我希望这是其中的一部分，以便用户可以从导航中单击项目。

目前我的<Header /> 在我的<Router> 之外，我想这不起作用，因为我的路由器不知道重新渲染？

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  <div>
    <Header />
    <Router>
      <Switch>
        <Route exact path="/" component={Posts} />
        <Route exact path="/:category/:postId" component={PostDetails} />
        <Route path="/:category" component={CategoryView} />
      </Switch>
    </Router>
  </div>

我的标题有一个例如<Link to="/">LOGO</Link>

【问题讨论】：

你在中使用
上方的 div 尝试过
吗？
您的问题是您的路由组件在单击导航链接时没有重新渲染吗？ IE。从 /category1 移动到 /category2
@dpetrini 我没试过。
@SteveHolgado 没错

标签： reactjs react-router react-router-dom

【解决方案1】：

我的回答：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div> 
          <Header />
          <Switch>
           <Route exact path="/" component={Posts} />
           <Route exact path="/:category/:postId" component={PostDetails} />
           <Route path="/:category" component={CategoryView} /
          </Switch>
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

【讨论】：

【解决方案2】：

当您更改位置但匹配相同的路线时，您的组件不会重新安装，只是接收新的道具。

因此，您可以使用 componentWillReceiveProps 挂钩来使用新的路由参数（例如 nextProps.match.params.category）更新您的组件：

...

componentWillReceiveProps(nextProps) {

  // Update component using nextProps

}

...

【讨论】：