Question

对反应路由器有疑问。

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

目前我的<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>

Answer 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>
    );
  }
}

Answer 2

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

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

...

componentWillReceiveProps(nextProps) {

  // Update component using nextProps

}

...

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

2 个答案: