Reactjs 反应路由器&；开关-刷新后未加载页面

我对中的正确渲染组件有问题-现在我有以下问题：

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={LayoutPage} />
          <Route exact path="/admin-panel" component={AdminPanel} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

函数应用程序（）{
返回(
);
}

及

函数布局页（）{
返回(
);
}

基本上我想根据需要呈现LayoutPage或AdminPanel。这项工作很好，但当我在一个“儿童”页面（SinglePropertyCard、PropertiesPage、HistoryPage、Conatct）上刷新页面时，一切都消失了。当我在主页（“/”）或管理页面（‘管理面板’）上时，刷新工作正常。我知道这是因为这两个页面在应用程序组件路径上。解决方案是将每个组件从LayoutPage放到应用程序组件：

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="/" component={LayoutPage} />

          <Route path="/nieruchomosci" component={PropertiesPage} />
          <Route path="/archiwum" component={HistoryPage} />
          <Route
            exact
            path="/nieruchomosc/:name/:id"
            component={SinglePropertyCard}
          />
          <Route exact path="/contact" component={Conatct} />
        </Switch>
        <Footer />
        <Route path="/admin-panel" component={AdminPanel} />
      </BrowserRouter>
    </div>
  );
}

函数应用程序（）{
返回(
);
}

但在那之后，当我进入AdminPanel页面（'/AdminPanel），我可以看到导航栏和页脚，这是我不想看到的

有什么想法吗？谢谢

编辑：解决方案

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route
          path="/"
          render={
            props =>
              props.location.pathname !== '/admin-panel' ? <Navbar /> : null
          }
        />
        <Switch>
          <Route exact path="/" component={LayoutPage} />

          <Route path="/nieruchomosci" exact component={PropertiesPage} />
          <Route path="/archiwum" component={HistoryPage} />
          <Route
            exact
            path="/nieruchomosc/:name/:id"
            component={SinglePropertyCard}
          />
          <Route exact path="/contact" component={Contact} />
        </Switch>
        <Route
          path="/"
          render={
            props =>
              props.location.pathname !== '/admin-panel' ? <Footer /> : null
          }
        />

        <Route path="/admin-panel" component={AdminPanel} />
      </BrowserRouter>
    </div>
  );
}

函数应用程序（）{
返回(
props.location.pathname！='/admin panel'？：null
}
/>
props.location.pathname！='/admin panel'？：null
}
/>
);
}

您需要有条件地呈现

和

组件。 基本上，您不希望在AdminPanel页面上呈现导航栏和页脚。您可以找到页面的当前路径，并在导航栏和页脚不是您的管理面板路径时呈现导航栏和页脚

{this.props.history.location !== 'localhost:3000/admin-panel' && <Navbar />}

{this.props.history.location !== 'localhost:3000/admin-panel' && <Footer />}

{this.props.history.location！=='localhost:3000/管理面板'&&}
{this.props.history.location！='localhost:3000/管理面板'&&}

---

此.props.history.location

用于查找页面的当前url。

您需要有条件地呈现

和

组件。 基本上，您不希望在AdminPanel页面上呈现导航栏和页脚。您可以找到页面的当前路径，并在导航栏和页脚不是您的管理面板路径时呈现导航栏和页脚

{this.props.history.location !== 'localhost:3000/admin-panel' && <Navbar />}

{this.props.history.location !== 'localhost:3000/admin-panel' && <Footer />}

{this.props.history.location！=='localhost:3000/管理面板'&&}
{this.props.history.location！='localhost:3000/管理面板'&&}

---

this.props.history.location

用于查找页面的当前url。

我花了将近一个小时的时间，但我找到了答案。我把它放在上面。谢谢！：）我花了将近一个小时的时间，但我想明白了。我把它放在上面。谢谢！：）