React router & Switch - страница не загружается после обновления - PullRequest
Новая
       20

React router & Switch - страница не загружается после обновления

0 голосов
/ 30 марта 2020

У меня проблема с правильными компонентами рендеринга - прямо сейчас у меня есть это: 

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) и я повторно ссылаюсь sh на страницу, все исчезает. Обновление работает нормально, когда я на главной странице ('/') или на странице администратора ('админ-панель'). Я знаю, что это потому, что эти две страницы находятся на маршруте компонента приложения. Решение состоит в том, чтобы поместить каждый компонент из 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>
  );
}

, но после этого, когда я go перехожу на страницу AdminPanel ('/ admin-панель), я вижу 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>
  );
}

1 Ответ

2 голосов
/ 30 марта 2020

Вам необходимо условно отрендерить <Navbar /> и <Footer /> компонент. По сути, вы не хотите отображать Навбар и Нижний колонтитул на странице AdminPanel. Вы можете найти текущий путь страницы и отобразить Навбар и Нижний колонтитул, если это не ваш путь к панели администратора. 

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

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

this.props.history.location используется для печати текущего URL страницы.

...