ReactJs: вложенные маршруты внутри компонента не работают должным образом после защиты компонента в приложении. js с помощью частного маршрута - PullRequest
Новая
       69

ReactJs: вложенные маршруты внутри компонента не работают должным образом после защиты компонента в приложении. js с помощью частного маршрута

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

Изначально так выглядит маршрут в приложении. js:

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

<Route
  path="/home"
  name="Home"
  render={props => <DefaultLayout {...props} />
/>

DefaultLayout. js 

<Switch>
  {routes.map((route, idx) => {
    return route.component ? (
      <Route
        key={idx}
        path={route.path}
        exact={route.exact}
        name={route.name}
        render={props => <route.component {...props} />}
      />
    ) : null;
  })}
  <Redirect from="/home" to="/home/dashboard" />
</Switch>

Таким образом, маршрут / home в основном направлен на DefaultLayout компонент, который содержит все вложенные маршруты приложения. Это работает отлично .
Поскольку только авторизованный пользователь должен иметь доступ к домашней странице, я реализовал компонент PrivateRoute :

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);

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

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

Теперь я получаю пустой экран после Вход в систему. (Хотя меня перенаправляют на / home / dashboard ). Поэтому внутренняя маршрутизация компонента DefaultLayout больше не работает должным образом.
ЗАМЕЧАНИЕ: Я обнаружил, что вложенные маршруты внутри DefaultLayout компонент должен быть определен внутри Приложение. js, чтобы они работали. Например:

DefaultLayout. js

 <Redirect from="/home" to="/home/dashboard" />

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

<PrivateRoute
  exact
  name="Dashboard"
  path="/home/dashboard"
  component={Dashboard}
/>

Но Я не могу сделать это для всех маршрутов. Странно то, что до использования PrivateRoute вложенные маршруты отлично работали . И я не понимаю, почему компонент PrivateRoute сделал вложенную маршрутизацию внутри DashboardLayout не работает должным образом ?

...