React router & Switch - 刷新后页面未加载

Question

我在正确渲染组件时遇到问题 - 现在我有这个：

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。这工作正常，但是当我在 'child' 页面之一（SinglePropertyCard、PropertiesPage、HistoryPage、Conatct）上刷新页面时，一切都消失了。当我在主页 ('/') 或管理页面 ('admin-panel') 时，刷新工作正常。我知道那是因为那两个页面在 App 组件路由上。解决方案是将 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) 时，我可以看到 Navbar 和 Footer，这是我不想看到的。

有什么想法吗？谢谢！

编辑：解决方案

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

Answer 1

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

React router & Switch - 刷新后页面未加载

React router & Switch - page is not loading after refreshing

router

reactjs

react-router