Question

我想逐页制作条件Header，这意味着我不想在Header页面上显示Home，而我想在Header上显示react-router-dom其他页面，如帖子页面，项目页面等。

我试图思考如何解决此问题，但是并没有使用<div className="ui container"> <BrowserRouter> <Header /> <Route exact path="/"> <Route exact path="/posts"> <Route exact path="/project"> <Route exact path="/profile"> </BrowserRouter> </div>的特殊方法。当然，这可能对我来说很难。

无论如何，我都无法解决以上问题。

所以，这是当前代码：

<div className="ui container">
  <BrowserRouter>
    {() => { 
      if(path !=="/") 
        return <Header />;
      } else {
        return ;
    }}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>
</div>

我想这样修复它：

--without-heartbeat

Answer 1

尝试使用Switch：

import { Route, Switch } from 'react-router-dom';

...

<Switch>
      <Route exact path="/" component={null} />
      <Route component={Header} />
<Switch>

...

doc：https://reacttraining.com/react-router/web/api/Switch

Answer 2

有很多方法可以做到。

您可以使用withRouter（），这是一个高级组件来包装您的组件。因此，有了该组件，就可以访问BrowserRouter道具。
您可以使用Redux，在将帖子页面/组件安装好之后，将isheader状态设置为false。那么您可以使用此状态来调节Header组件。

参考链接：-Hide header on some pages in react-router-dom

另一种方法是使用父组件示例包装那些具有标题的路由：

const Layout = ({ children }) => (
            <div>
              <Header />
                {children}
            </div>
          )
        const App = ()=> (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Layout>
                      <Route exact path="/posts" component={..}>
                      <Route exact path="/project" component={..}>
                      <Route exact path="/profile" component={..}>
                    </Layout>
                </Switch>
            </BrowserRouter>
    )

Answer 3

没有Switch，您可以这样做：

 <BrowserRouter>
    {window.location.pathname !== "/" ? <Header /> : null}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>

我如何使用React创建条件标题

3 个答案: