Реагируйте - Есть ли способ проверить, когда страница загружается после изменения маршрута?

Question

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

Мне нужно что-то похожее на pace. js, поэтому библиотека может определить, когда страница загружена.

Answer 1

Если вы хотите подождать какой-нибудь асинхронный c запрос для каждой страницы, есть несколько способов:

. Вы можете создать глобальный загрузчик и вставить его рядом с маршрутизатором:

<div>
  <Loader />
  <Switch>
    <Route path="/" exact> <Home /> </Route>
    <Route path="/users"> <Users /> </Route>
    <Route path="/articles"> <Article /> </Route>
    ...
  </Switch>
</div>

Затем создайте пользовательский хук:

// useGlobalLoading.js
import ...

export default (isLoading) => {
  const dispatch = ...;

  useEffect(() => {
    dispatch(showLoading());
    return () => {
      dispatch(hideLoading());
    }
  }, [isLoading])
}

, а затем в любом компоненте

...

const Users = () => {
  const [isLoading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useGlobalLoading(isLoading);

  const fetch = useCallback(async () => {
    try {
      const response = await api.getUsers(...);
      setUsers(response.data.users);
      setIsLoading(false);
    } catch (error) { ... }
  }, []);

  if (isLoading) {
    return null;
  }

  return <div>{users ... }</div>
}

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

// Users.js or Articles.js
return (
  <>
    {isLoading && <Loader />}
    {!isLoading && <div>{users...}</div>}
  </>
)