Javascript 使用Redux在组件上获取存储值

我有一个包含此元素的商店：

loggedIn:false

我想做的是阻止用户进入任何页面，如果他还没有登录。 当他成功登录时，其他组件上的布尔值变为true

为了阻止他访问我的应用程序的其他链接，我创建了一个名为Refresh Route的组件，它可以执行以下操作：

import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

const RefreshRoute = ({ component: Component, ...rest }) => {
const canGo=this.props.loggedIn;
window.alert(canGo)
return (<Route
    {...rest}
    render={props =>
        canGo ? (
            <Component {...props} />
        ) : (
                <Redirect
                    to={{
                        pathname: "/login"
                    }}
                />
            )
    }
/>)
}

 const mapStateToProps = state => {
  return {
    loggedIn: state.atuth.loggedIn
 }
}

export default connect(mapStateToProps)(RefreshRoute); 

从“React”导入React；
从“react redux”导入{connect}；
从“react router dom”导入{Route，Redirect}；
常量刷新路由=（{component:component，…rest}）=>{
const canGo=this.props.loggedIn；
窗口警报（canGo）
返回(
坎戈(
) : (
)
}
/>)
}
常量mapStateToProps=状态=>{
返回{
loggedIn:state.atuth.loggedIn
}
}
导出默认连接（MapStateTops）（刷新路由）；

我的问题是道具是空的，我不知道为什么

这里是我调用刷新路由的组件：

const Routes = () => (
 <main>
 <Switch>
  <Route exact path='/' component={Main} /> 
  <Route exact path='/customers' component={Customers} />
  <Route exact path='/customers/:market' component={CustomersByMarket} />
  <Route exact path='/customers/:market/:customer' component={Customer} />
  <Route exact path='/customers/:market/:customer/:environment' component={MessageDashboard} />
  <RefreshRoute exact path='/home' component={Main}/>
  <Route exact path='/addPermission' component={AddPermissions}/>
  <Route exact path='/excludePermission' component={RemovePermissions}/>
  <Route exact path='/login' component={SignIn}/>
</Switch>

const Routes=（）=>(

)

---

导出默认路径

在功能组件中，您没有此功能组件。因此，道具会发生更改：

const RefreshRoute = ({ component: Component, ...rest }) => { 
  const canGo=this.props.loggedIn; // props is not bound to this
  ...
}

致：

或者在您的情况下：

const RefreshRoute = ({ component: Component, ...rest }) => {
  const canGo = rest.loggedIn
}

---

在功能组件中，您没有

此。因此，道具更改：

const RefreshRoute = ({ component: Component, ...rest }) => { 
  const canGo=this.props.loggedIn; // props is not bound to this
  ...
}

致：

或者在您的情况下：

const RefreshRoute = ({ component: Component, ...rest }) => {
  const canGo = rest.loggedIn
}

问题在于：

const RefreshRoute = ({ component: Component, ...rest }) => {
    const canGo=this.props.loggedIn;

您正在使用
{component:component，…rest}
解构输入
道具。因此属性
loggedIn
将位于
rest.loggedIn
内：

const RefreshRoute = ({ component: Component, ...rest }) => {
    const canGo = rest.loggedIn;

否则，您可以在解构参数内显式显示
loggedIn
，并使用它：

const RefreshRoute = ({ component: Component, loggedIn, ...rest }) => {
    const canGo = loggedIn;

问题在于：

const RefreshRoute = ({ component: Component, ...rest }) => {
    const canGo=this.props.loggedIn;

您正在使用
{component:component，…rest}
解构输入
道具。因此属性
loggedIn
将位于
rest.loggedIn
内：

const RefreshRoute = ({ component: Component, ...rest }) => {
    const canGo = rest.loggedIn;

否则，您可以在解构参数内显式显示
loggedIn
，并使用它：

const RefreshRoute = ({ component: Component, loggedIn, ...rest }) => {
    const canGo = loggedIn;

谢谢，我太习惯使用道具了，忘记了我的rest变量！没问题，请您将此标记为已回答？谢谢，我太习惯使用道具了，忘记了我的rest变量！没问题，请您将此标记为已回答好吗？