Question

我正在使用ReactJS，并且有一个登录屏幕。仅在登录后，才应向用户显示标题。现在，标题不出现在登录屏幕上，我不需要。我该如何摆脱呢？

我尝试将登录路径包装在自己的Router中，但这无济于事。标头仍然呈现。以下代码在index.js中。那是我所有的路由完成并调用其他组件的地方。

const routing = (
  <div>
    <Router>
      <Switch>
        <Route path="/" exact component={Login} />
      </Switch>
    </Router>
    <Router>
      <Header>
        <Switch>
          <Route path="/landingpage/videos" exact component={Videos} />
        </Switch>
        <Switch>
          <Route path="/landingpage/contact-us" exact component={Contact} />
        </Switch>
        <Switch>
          <Route path="/landingpage/stats/" exact component={Stats} />
        </Switch>
      </Header>
    </Router>
  </div>
);

ReactDOM.render(routing, document.getElementById("root"));

Answer 1

您的代码中存在一些误解，请尝试：

const routing = (
    <div>
      <Switch>
          <Route path="/" exact component={Login} />
          <Route path="/landingpage/videos" exact render={(props) => <Header><Videos /></Header>} />
          <Route path="/landingpage/contact-us" exact  render={(props) => <Header><Contact /></Header>} />
          <Route path="/landingpage/stats/" exact  render={(props) => <Header><Stats /></Header>} />        
        </Switch>
    </div>
  );

<Router />呈现所有匹配的路由，而<Switch />仅呈现第一个匹配的路由。

另外，您的脚手架应该用路线包裹每个单独的组件（有不同的模式来管理，这只是一个）

如何防止标题显示在登录屏幕上？

1 个答案: