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。这项工作正常，但是当我进入“子”页面（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）时，我可以看到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。您可以找到页面的当前路径，并在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。

React Router＆Switch-刷新后页面未加载

1 个答案: