Запретить рендеринг компонента навигации на одном маршруте, но рендеринг на любом другом маршруте - PullRequest
Новая
       15

Запретить рендеринг компонента навигации на одном маршруте, но рендеринг на любом другом маршруте

0 голосов
/ 28 октября 2019

Итак, у меня есть один маршрут /reminder, где я не хочу, чтобы мой Navigation компонент, но я хочу, чтобы компонент Navigation отображался на каждом другом маршруте, и я не уверен, как это сделать?

Это мой App.js, где я использую react-router-dom для своей маршрутизации. 

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navigation from "./components/navigation/Navigation";
import Reminder from "./components/reminder/Reminder ";

const App = () => {

  return (
    <>
      <Switch>
        <Route path="/reminder" component={Reminder} exact />
      </Switch>
      <Navigation />
      <MainContent>
        <Router>
          <Route path={"/"} component={Dashboard} exact />
        </Router>
      </MainContent>
    </>
  );
}

Я искал похожие проблемы, но это в основном для аутентифицированных страниц, это не так. не для аутентифицированной страницы.

Я не хочу идти по пути необходимости добавления компонента Navigation в каждый из моих 21 текущих маршрутов, кажется, что должен быть лучший метод?

С моимВ приведенном выше коде он отображает компонент Reminder, но по-прежнему отображает компонент Navigation.

1 Ответ

1 голос
/ 29 октября 2019

Вы можете получить доступ к данным о совпадении, используя настраиваемый хук с реакции-маршрутизатора . Все, что вам нужно сделать, это 

import { useRouteMatch } from "react-router-dom";

function App() {
  let match = useRouteMatch("/reminder");

  // Do whatever you want with the match...
  return (
<>
  <Switch>
    <Route path="/reminder" component={Reminder} exact />
  </Switch>
  {!match && <Navigation />} <---Conditional rendering
  <MainContent>
    <Router>
      <Route path={"/"} component={Dashboard} exact />
    </Router>
  </MainContent>
</>
  );
    }

Кроме того, хотя я не изменил это в вашем примере, как правило, не рекомендуется создавать маршрут вне компонента маршрутизатора. На самом деле, я немного удивлен, что реакцию-роутер-дом не выдал за вас ошибку.

...