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

IT技术 reactjs react-router react-router-dom
2021-05-19 03:11:20

有一个关于react-router的问题。

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

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

2个回答

我的评论回答：

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

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

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

...

componentWillReceiveProps(nextProps) {

  // Update component using nextProps

}

...
其它你可能感兴趣的问题
上一篇仅呈现根路由。IndexRoute 不渲染组件 下一篇在 React 中创建表单的最佳方法是什么？