reactjs - 仅显示某些路由的组件 - React

Question

我正在 React 中开发一个带有登录界面的网站。该网站显示自定义导航组件，但我不希望它显示在主页路线(即登录页面)上，但据我了解，静态组件不会在路线更改时重新呈现，是否准确？

我正在使用 React-Router 来处理所有路由。

这是我的 App.js 现在的样子:

render() {
   return (
       <Router className="App">
          <Header />
          <NavigationBar />
          <div id="container">
          <Route path="/" exact component={LoginPage}/>
          <Route path="/EventInfo" component={EventInfo}/>
          <Route path="/RSVP" component={RSVP}/>
          <Route path="/Attendance" component={Attendance}/>
          <Route path="/Confirmation" component={Confirmation}/>
          <Route path="/Contact" component={Contact}/>
          <Route path="/Lodging" component={Lodging}/>
        </div>
     </Router>
   );
};

Answer 1

没错。按照目前的结构，您的 <NavigationBar />会一直显示。您可以做的是隔离 Routes使用 NavigationBar 到他们自己的组件。
所以尝试这样的事情:

import { Switch, Router, Route } from "react-router-dom"; // fixed "

render() {
   const AuthenticatedRoutes = () => {
       return (
          <NavigationBar />
          <div id="container">
               <Switch>
                   <Route path="/EventInfo" component={EventInfo}/>
                   <Route path="/RSVP" component={RSVP}/>
                   <Route path="/Attendance" component={Attendance}/>
                   <Route path="/Confirmation" component={Confirmation}/>
                   <Route path="/Contact" component={Contact}/>
                   <Route path="/Lodging" component={Lodging}/>
              </Switch>
          </div>
       )
   }

   return (
       <Router className="App">
           <Header />
               <Switch>
                   <Route path="/" exact component={LoginPage}/>
                   <Route component={AuthenticatedRoutes}/>
               </Switch>
       </Router>
   );
};

在我们的新 Router定义， Header组件将始终显示。
这里重要的是要了解 Switch成分。它将呈现第一个 Route其路径与提供的 URL 匹配。所以如果 URL 是 "/"我们将只显示 Header和 LoginPage .
但是，假设现在我们导航到 URL "/EventInfo" .现在，外部 Switch 中没有匹配路径在我们的 Router 中定义，所以我们渲染 AuthenticatedRoutes成分。执行相同的模式，现在我们显示 NavigationBar任何时候和 react-router-dom将执行内部 Switch找一个 Route其路径与提供的 URL 匹配。从而呈现 EventInfo组件也是如此。
此结构对于切换 authenticated 的显示非常有用。和 unauthenticated成分。