1

最初这是App.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组件中的嵌套路由必须在App.js中定义才能正常工作。例如：

DefaultLayout.js

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

应用程序.js

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

但是，我不能对所有路线都这样做。奇怪的是，在使用 PrivateRoute 之前，嵌套路由可以完美运行。而且我不明白为什么PrivateRoute组件使DashboardLayout内的嵌套路由无法正常运行？

4

0 回答 0