Реагируйте на передачу реквизита методу Routes - PullRequest
Новая
       69

Реагируйте на передачу реквизита методу Routes

0 голосов
/ 12 марта 2020

Хорошо, нам нужен какой-то способ создания «частного маршрута» в нашем приложении React. Мы используем Redux для хранения состояния и имеем метод LOGIN_CHECK, который возвращает статус loggedIn. Проблема, которую мы имеем, состоит в том, чтобы вставить эту подпрограмму loggedIn в наш метод Routes (это не компонент). Мы используем response-router и rea c -router-config. Ниже мы находимся до ...

privateRoute. js

    import React, { useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import accountActions from '../../redux/actions/accountActions';
import { connect } from 'react-redux';
export const PrivateRoute = ({ component: Component }) => (
    useEffect(() => {
        store.dispatch({
            type: accountActions.LOGIN_CHECK
        });
    }, [])); //Passing an empty array as second argument triggers the callback 
            //in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
    <Route render={props => (
        props.loggedIn 
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />

function mapStateToProps(state, ownProps) {
    return {
        loggedIn: state.accountReducer.loggedIn
    }
}
function loadData(store){
    store.dispatch({
        type: accountActions.LOGIN_CHECK
    });
}
export default {
    component: connect(mapStateToProps)(PrivateRoute),
    loadData
}

и вот как мы визуализируем маршруты ... 

    {
        ...CompanyDashboard,
        path: '/CompanyDashboard',
        exact: true,
        render: (props) => <PrivateRoute {...props}/>
        // render: (props) => (
        //     //TODO: get loggedIn props
        //     props.loggedIn
        //         ? <PrivateRoute {...props}/>
        //         : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        // )
    },

При обращении к /CompanyDashboard route мы получаем эту ошибку ..

act_devtools_backend. js: 6 Предупреждение: React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: object.

Есть ли более простой способ сделать это?

...