反应路由器和交换机 - 刷新后页面未加载答案

【问题标题】：React router & Switch - page is not loading after refreshing反应路由器和交换机 - 刷新后页面未加载
【发布时间】：2020-07-11 05:11:11
【问题描述】：

我对正确的渲染组件有问题 - 现在我有这个：

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

和

function LayoutPage() {
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route
            exact
            path="/nieruchomosc/:name/:id"
            component={SinglePropertyCard}
          />
          <Route exact path="/nieruchomosci" component={PropertiesPage} />
          <Route exact path="/archiwum" component={HistoryPage} />
          <Route exact path="/contact" component={Conatct} />
        </Switch>
        <Footer />
      </BrowserRouter>
    </>
  );
}

基本上我想根据需要呈现 LayoutPage 或 AdminPanel。这工作正常，但是当我在“子”页面之一（SinglePropertyCard、PropertiesPage、HistoryPage、Conatct）并刷新页面时，一切都消失了。当我在主页（'/'）或管理页面（'admin-panel'）上时，刷新工作正常。我知道那是因为这两个页面在 App 组件 Route 上。解决方案是将LayoutPage中的每一个组件放到App组件中：

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 页面 ('/admin-panel) 时，我可以看到导航栏和页脚，这是我不想看到的。

有什么想法吗？谢谢！

编辑：解决方案

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>
  );
}

【问题讨论】：

标签： reactjs react-router router

【解决方案1】：

您需要有条件地渲染<Navbar /> 和<Footer /> 组件。基本上你不想在 AdminPanel 页面上呈现 Navbar 和 Footer。你可以找到页面的当前路径并在它不是你的管理面板路径时呈现 Navbar 和 Footer。

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

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

this.props.history.location用于查找当前页面的url。

【讨论】：

我花了将近一个小时，但我想通了。我把它放在上面。谢谢！ :)