React-router-dom: вложенные маршруты не работают, но вместо этого направляются из приложения компонента root - PullRequest
Новая
       103

React-router-dom: вложенные маршруты не работают, но вместо этого направляются из приложения компонента root

0 голосов
/ 18 февраля 2020

Я следую этому учебнику для реализации вложенной маршрутизации.
Вот соответствующий код:

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

   <PrivateRoute
                exact
                name="Home"
                path="/home"
                component={DefaultLayout}
              />

DefaultLayout. js 

const Users = React.lazy(() => import("../../views/Users/Users"));

          <Route path="/home/users" component={Users} />

PrivateRoute. js 

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      auth.isAuthenticated === true ? (
        <Component {...props} />
      ) : (
        <Redirect to="/" />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

Итак, как вы уже догадались, Я защищаю маршрут / home с помощью компонента PrivateRoute .
Маршруты / home связаны с компонентом DefaultLayout .
Компонент DefaultLayout содержит NestedRoute , то есть / home / users , который ведет к компоненту Users .

Частный маршрут работает правильно, и он направляет пользователя после входа в систему по умолчанию:
enter image description here
Однако, когда я нажимаю на кнопку, которая маршрутизирует мне / home / users , я получаю этот пустой экран:
enter image description here Есть идеи, что я сделал неправильно?
РЕДАКТИРОВАТЬ 1 : Когда я добавляю это в приложение. js: 

   const Users = React.lazy(() => import("../../views/Users/Users"));

              <Route path="/home/users" component={Users} />

я перенаправляюсь на компонент Users . Однако не как вложенный маршрут , а как компонент в root маршрутах . Другими словами, компонент Users не отображается внутри компонента defaultLayout , а отображается как компонент root . Я надеюсь, что в этом есть смысл. Вот скриншот:
enter image description here

EDIT 1 Вывод: Реализация вложенной маршрутизации не работает. Приложение по-прежнему направляется изнутри Приложение. js вместо изнутри DefaultLayout. js.
РЕДАКТИРОВАТЬ 2: Я понял, что даже без PrivateRoute и использование обычного Route компонента, вложенная маршрутизация по-прежнему не работает: 

      <Route exact path="/home" name="Home" component={DefaultLayout} />

1 Ответ

0 голосов
/ 18 февраля 2020

Похоже, вам нужно удалить exact реквизит из вашего Home Route: 

<Route path="/home" name="Home" component={DefaultLayout} />

При exact ваш DefaultLayout компонент будет отображаться только тогда, когда URL точно /home. Поскольку /home/users не равен /home, при переходе к /home/users ни ваш компонент DefaultLayout, ни вложенный маршрут Users не будут отображаться.

Вот документы, описывающие exact проп: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact -бул

...