Блог

Главная - Вопросы по программированию - Использование маршрутизатора React, Отображение Не найденной страницы поверх компонента макета

Использование маршрутизатора React, Отображение Не найденной страницы поверх компонента макета

#reactjs #react-router

Вопрос:

У меня есть настройка React-маршрутизатора для навигации по страницам. У меня есть 2 разных экрана, 1-страница входа в систему, а другой-страница панели мониторинга. Я создал макет для своей страницы панели мониторинга, в которую я добавил верхний, боковой и нижний колонтитулы. Я также добавил страницу «Не найдено», которая отображает не найденный контент рядом с СайдМену.

Проблема здесь в том, что я не могу охватить весь документ в разделе Не найдено(404). На странице «Не найдено» отображается, где отображаются все страницы, а мой макет все еще виден.

На данный момент я внес изменения в CSS на свою не найденную страницу, указав ее в качестве абсолютной позиции и выровняв все содержимое на странице. Есть ли какое-либо лучшее решение с маршрутизацией React ?

Я добавил свой App.jsx и Layout.jsx, где я добавил свой шаблон маршрутизации.

Приложение.jsx

 <Router history={history}>
        <div className="App">
          <Switch>
            <Route path="/login" component={Login} />
            <PrivateRoute path="/" component={Layout} />
            <Route path="*">
              <Redirect from="/" to="dashboard" />
            </Route>
          </Switch>
          <Route path="*" component={NotFound} />
        </div>
      </Router>

Макет.jsx

  <div className="main">
        <div className="flex">
          <Sidemenu />
          <div className="content">
            <Header />
            <Switch>
              <Route exact path={`${match.path}`} component={Dashboard} />

              <Route path={`${match.path}dashboard`} component={Dashboard} />

              <Route path={`${match.path}Users`} component={Users} />

              <Route path={`${match.path}Employees`} component={Employees} />

              <Route path={`${match.path}teaching-staff`} component={TeachingStaff} />

              <Route path={`${match.path}house-keepers`} component={HouseKeepers} />

              <Route path={`${match.path}data-import`} component={DataImport} />

              <Route path={`${match.path}data-export`} component={DataExport} />

              <Route component={NotFound}></Route>
              </Switch>
          </div>
        </div>
      </div>
Метки: ,