Как я могу предотвратить повторный монтаж компонента при использовании реагирующего маршрутизатора и авторизации? - PullRequest
Новая
       11

Как я могу предотвратить повторный монтаж компонента при использовании реагирующего маршрутизатора и авторизации?

0 голосов
/ 10 февраля 2020

У меня возникли проблемы с абстрагированием потока авторизации в отдельный компонент маршрута.

Проблема в том, что, как только я абстрагировал логи авторизации c, компонент для маршрута перемонтируется. Перемонтирование компонента связано с методами жизненного цикла componentDidMount и componentenentWillUnmount .

Если я не абстрагирую logi авторизации c, компонент работает правильно - без перемонтирования.

Вот код, который не является абстрагированным, но работает правильно. 

    <Route
      path={routes.sessionList()}
      render={() => isAuthenticated ? <SessionPages.SessionList /> : <NotLoggedInRedirect />}
    />

Вот то, что я пробовал до сих пор:

  1. Перемещено auth logi c в отдельный компонент (как с использованием метода рендеринга, так и отправки компонента в качестве пропеллера) 
// route definition
const PrivateRoute = ({ path, component }) => (
    <Route
    exact
    path={path}
    render={() => isAuthenticated ? component : <NotLoggedInRedirect />}
    />
);

// router code
<PrivateRoute
    path={routes.sessionList()}
    component={<SessionPages.SessionList />}
/>
// router code
Перенес авторизацию logi c в отдельный метод (как с использованием метода рендеринга, так и отправки компонента в качестве пропеллера) 
// method definition
let getPrivateComponent = (Page) => {
    let Component = NotLoggedInRedirect;
    if(isAuthenticated) Component = () => <ErrorBoundaryContainer><Page /></ErrorBoundaryContainer>;

    return Component;
};

// router code
<Route
    exact
    path={routes.sessionList()}
    component={getPrivateComponent(SessionPages.SessionList)}
/>
// router code

Проверяя документацию реагирующего маршрутизатора, они упоминают, что при использовании метода рендеринга предотвратит перемонтирование компонента, но нет ничего о переносе компонента маршрута. https://reacttraining.com/react-router/web/api/Route/render-func

Я бы использовал рабочую версию (без абстракции), но Есть много маршрутов, и это просто грязный и довольно неустранимый)

Есть ли шанс, что кто-нибудь столкнулся с такой проблемой?

РЕДАКТИРОВАТЬ : Я использую реагировать роутер v5

...