Reactjs 如何在React路由器无状态中间件中使用Redux？

当某个用户试图访问我的应用程序的任何页面时，将调用React路由器中间件来检查该用户是否已登录。问题是要访问Redux存储，我需要使用

store.getState（）

，如果我使用

store.listen（…）

，我会收到一个错误（

“组件”不存在

）

const PrivateRoute=（{component:component，…rest}）=>{//接收组件和路径
返回(
{
返回store.getState（）.login.token.status==200
? 
: 
}}
/>
)
}
//store.subscribe（privaterout）//请求某些页面时出错
导出默认私有路由；

我知道要监听这个函数的变化，我需要传递一个组件，但我认为这是不可能的，因为它是一个中间件。在这种情况下，我真的需要倾听变化吗？如果是，我该怎么做（如何模仿这种事情）

Obs：例如

Private}/>

试试这个

const PrivateRoute = ({ component: Component, hasLogin, ...rest }) => (
 <Route
  {...rest}
  render={props => (
    hasLogin ? (
      <Component {...props} />
    ) : (
      <Redirect
        to={{
          pathname: '/login'
        }}
      />
    )
  )}
/>
)
export default connect(state => ({
 hasLogin: state.login.hasLogin
}))(PrivateRoute)

const PrivateRoute=（{component:component，hasLogin，…rest}）=>(
(
哈斯登录(
) : (
)
)}
/>
)
导出默认连接（状态=>({
hasLogin:state.login.hasLogin
}))（私人航线）

在交换机中，像这样呼叫

<PrivateRoute exact path='/' component={some page} />

试试这个

const PrivateRoute = ({ component: Component, hasLogin, ...rest }) => (
 <Route
  {...rest}
  render={props => (
    hasLogin ? (
      <Component {...props} />
    ) : (
      <Redirect
        to={{
          pathname: '/login'
        }}
      />
    )
  )}
/>
)
export default connect(state => ({
 hasLogin: state.login.hasLogin
}))(PrivateRoute)

const PrivateRoute=（{component:component，hasLogin，…rest}）=>(
(
哈斯登录(
) : (
)
)}
/>
)
导出默认连接（状态=>({
hasLogin:state.login.hasLogin
}))（私人航线）

在交换机中，像这样呼叫

<PrivateRoute exact path='/' component={some page} />

使用Redux

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

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
const privaterout=（{component:component，auth:auth，…rest}）=>(
auth.isAuthenticated==真(
) : (
)
}
/>
);
PrivateRoute.propTypes={
auth:PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接（MapStateTops）（PrivateRoute）；

使用Redux

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

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
const privaterout=（{component:component，auth:auth，…rest}）=>(
auth.isAuthenticated==真(
) : (
)
}
/>
);
PrivateRoute.propTypes={
auth:PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接（MapStateTops）（PrivateRoute）；

登录后，您将发送一个操作以将登录值存储在存储区中。 如果是，请检查

---

我认为您可以将登录令牌存储在

localStorage

中，并使用

store.get（'keyname'）

轻松地将其取回

登录后，您将调度一个操作以将登录值存储在存储区中。 如果是，请检查

我认为您可以将登录令牌存储在

localStorage

中，并使用

store.get（'keyname'）

轻松地将其取回