Получить значение хранилища для компонента с Redux

Question

У меня есть этот магазин с этим элементом:

loggedIn:false

Я хочу заблокировать переход пользователя на любые страницы, если он еще не вошел в систему.Когда он успешно вошел в систему, логическое значение изменится на true для другого компонента.

Чтобы заблокировать ему доступ к другим ссылкам моего приложения, я создал компонент под названием «Обновить маршрут», который выполняет следующие действия:

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

Моя проблема в том, что реквизиты равны нулю, и я не знаю почему.

Вот компонент, где я называю мой маршрут обновления:

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>

)

exportМаршруты по умолчанию;

Answer 1

Проблема здесь:

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

Вы деструктурируете вход props, используя { 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;

Answer 2

В функциональных компонентах у вас нет this.props, поэтому измените:

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

на:

const RefreshRoute = (props) => { 
  const canGo = props.loggedIn
}

Или в вашем случае:

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