Проблемы с зацикливанием при использовании перенаправления в маршруте React - PullRequest
Новая
       19

Проблемы с зацикливанием при использовании перенаправления в маршруте React

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

Существует компонент, который обнаруживает браузер и возвращает сообщение о неподдерживаемом браузере или возвращает перенаправление. Ниже приведена часть кода этого компонента: 

detectIE() {
    const ua = window.navigator.userAgent;
    const msie = ua.indexOf('MSIE ');
    console.log(msie);
    if (msie > 0) {
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }
    return false;
}

render() {
    if (this.detectIE()) {
        return (
            <FullPageError
                title={''}
                image={<BntIconWrapper icon={<SvgPageErrorGeneric />} defaultColor={true} />}
                explanation={''}
                userOptions={''}
            ></FullPageError>
        );
    }
    return <Redirect to="/login" />;
}

Этот компонент (<Route component={checkBrowser} />) отображается в компоненте root следующим образом: 

            <Switch>
                <Route component={checkBrowser} />
                <Route exact path="/login" component={checkLogin} />
                <Route exact path="/signin-oidc" component={checkSignInOidc} />
                <Route path="/error-page" component={ErrorPageContainer} />
                <Route path="/authorizeExternal" component={AuthorizeExternal} />
                <Route path="/" component={checkDarklyProjects} />
                <Route path="**" component={NotFound} />
            </Switch>

Суть проблемы заключается в том, что когда detectIE() возвращает false и компонент возвращает <Redirect to="/login" />, происходит зацикливание. Я думаю, что цикл происходит потому, что в <Route component={checkBrowser} /> свойство path отсутствует. Но это сделано для того, чтобы компонент отвечал на любой URL. Как визуализировать другие элементы управления после проверки браузера?

Ответы [ 2 ]

1 голос
/ 30 марта 2020

Цикл происходит потому, что когда вы перенаправляете его, базовый компонент (тот, у которого есть переключатель) каждый раз перемонтируется и перерисовывается. Я рекомендую не перенаправлять пользователя на вход в систему, поскольку ваш компонент checkBrowser проверяет только браузер (а не если пользователь вошел в систему), а также перемещает ваш checkBrowser на внешнюю сторону коммутатора.

Моя рекомендация для вашего кода 

render() {
    if (this.detectIE()) {
        return <Redirect to={"/error-page"} />;
    }
    // don't render anything to the DOM if its not an IE browser
    return null;
}

<checkBrowser/>
<Switch>
   <Route exact path="/login" component={checkLogin} />
   <Route exact path="/signin-oidc" component={checkSignInOidc} />
   <Route path="/error-page" component={ErrorPageContainer} />
   <Route path="/authorizeExternal" component={AuthorizeExternal} />
   <Route path="/" component={checkDarklyProjects} />
   <Route path="**" component={NotFound} />
</Switch>
0 голосов
/ 30 марта 2020

Попробуйте переместить <Route component={checkBrowser} /> снаружи <Switch></Switch>

...