身份验证完成后渲染专用路由不起作用

Question

我正在尝试设置一条私人路由。

这是我应用程序中的回报.js

      <Provider store={store}>
        <Router>
            <React.Suspense fallback={loading()}> 
                <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
                <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
                <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
                <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
                <Switch>
                  <PrivateRoute exact path="/" component={DefaultLayout} />
                </Switch>
            </React.Suspense>
        </Router>
      </Provider>

这是我的专用路由组件：

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="/login" />
      )
    }
    />
);
PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

我认为问题出在 auth.isAuthenticated; 当我将其更改为 true === true 时，正确的组件 - DefaultLayout- 按设计呈现。

但是，当我控制台.log(this.props.auth(时，我收到一个错误，说this.props.auth未定义。

编辑：当我在渲染部分将组件重写为基于类的组件和控制台时.log我会收到道具。所以，我相信我正在收到道具，还有一个问题。

我知道组件发生了什么：组件和...休息，但我认为我不知道当身份验证传递到私人路由时到底发生了什么。

我知道 this.props.auth 存在，因为当我控制台时.log它在我的登录帐户中，我可以看到用户已登录并已授权。

Answer 1

试试这个，而不是：

<Switch>
  <PrivateRoute exact path="/" component={DefaultLayout} />
</Switch>

删除包装PrivateRoute的Switch组件，这可能会阻止存储传递到您的PrivateRoute：

应用.js：

      <Provider store={store}>
        <Router>
            <React.Suspense fallback={loading()}> 
                <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
                <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
                <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
                <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
                <PrivateRoute exact path="/" component={DefaultLayout} />
            </React.Suspense>
        </Router>
      </Provider>