Question

我正在尝试建立一条私人路线。

这是我App.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会按设计呈现。

但是，当我console.log（this.props.auth）时，出现一条错误消息，指出this.props.auth未定义。

编辑： 当我将组件重新编写为基于类的组件并在render部分中输入console.log时，我会收到道具。因此，我认为我正在接受道具，还有另一个问题。

我知道组件发生了什么：组件和... rest，但是我不知道当auth传递到私有路由时，auth到底发生了什么。

我知道this.props.auth存在，因为当我在我的Login组件中进行console.log登录时，我可以看到用户已登录并获得授权。

Answer 1

尝试一下，而不是：

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

删除包裹Switch的{{1}}组件，这可能会阻止商店传递到您的PrivateRoute：

App.js：

PrivateRoute

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

1 个答案: