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 />会一直显示。您可以做的就是将使用NavigationBar的Routes隔离到自己的组件中。

因此，请尝试以下操作：

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

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组件。它将呈现路径与提供的URL匹配的第一个Route。因此，如果URL为"/"，我们将仅显示Header和LoginPage。

但是，假设我们现在导航到URL "/EventInfo"。现在，在我们的Switch中定义的外部Router中没有匹配的路径，因此我们渲染了AuthenticatedRoutes组件。执行相同的模式，现在我们始终显示NavigationBar，react-router-dom将执行内部的Switch来查找路径与提供的URL匹配的Route。因此也呈现了EventInfo组件。

此结构对于切换authenticated和unauthenticated组件的显示非常有用。

Answer 2

您可以执行以下操作：

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

Answer 3

在 NavigationBar.js 中你可以这样做

import React, { useState } from "react";
import { useLocation } from "react-router-dom";

function NavigationBar() {
  const location = useLocation();
  const path = location.pathname;
  const [display, setDisplay] = useState(
    path !== "/" ? true : false
  );

  return (
    <>
      {display && (
        <div>
          
        </div>
      )}
    </>
  );
}

export default NavigationBar;

仅某些路线的显示组件-反应

3 个答案: