`replaceState` не работает внутри` then` of Promise

Question

Предположим, что у нас есть вызов API, который аутентифицирует пользователя, а затем на основании того, возвращается ли пользователь с сервера или нет, мы либо заменяемState, либо ничего не делаем, что может выглядеть примерно так:

<Route component={App} onEnter={authUser} />

const onEnter = (nextState, replaceState) => { 
    if (isClient) { 
    AuthHelper.findCurrentUser() 
     .then(response => { 
     // This here doesn't work, `replaceState` doesn't change the page or URL, however I know for sure 
     // that the line is being called because if I put a `debugger` right before it, 
     // the `debugger` hits every time... 
     replaceState({nextPathname: nextState.location.pathname}, '/dashboard'); 
     }) 
     .catch(response => {}); 

    // If we put the same line here, it redirects the user to the dashbaord. 
    // replaceState({nextPathname: nextState.location.pathname}, '/dashboard'); 
    } 
} 

Единственным фактором дифференциации между replaceState работает и не работает в том, что один вызывается из тогдашних обещания, и один называется вне разрешения Promise. Выполняет ли Promise действие replaceState?

Answer 1

Синтаксис для асинхронных крюков onEnter - это бит бит, так как нам нужен способ блокировки перехода до тех пор, пока обработчик не завершит работу.

Если ваш крюк onEnter асинхронен, ему необходимо принять третий аргумент, например.

function onEnter(nextState, replaceState, callback) { 
    /* ... */ 
} 

Когда вы сделаете это, вы должны вызвать callback() себя, когда ваш ввести крючок завершения работы. Нам необходимо использовать этот API для поддержки людей, которые, например, не используются