Предусматривает ли history.pu sh отображение компонента, связанного с маршрутом?

Question

Итак, я создаю компонент загрузчика, который запрашивает данные на сервере, затем на основе ответа - затем страница загрузчика перенаправляет / перенаправляет их на другие страницы.

Но по какой-то причине history.push изменяется маршрут, но не отображает компонент и остается с компонентом <LoaderPage>. Не уверен, что мне не хватает. Так что любезно помогите.

Я обернул все страницы компонентом <LoaderPage>, так как моя цель - когда каждый раз, когда пользователь посещает какой-либо маршрут, компонент <LoaderPage> сначала отображает его, затем он выполняет свою работу, а затем перенаправляет / перенаправляет пользователей на другие страницы.

loader.tsx

import React from 'react';
import { useHistory } from 'react-router-dom'
import { AnimatedLodingScreen } from './loaders/AnimatedLodingScreen'

type loaderProps = {
 children: React.ReactNode;
};

export const LoaderPage = ({ children }:loaderProps) => {
  const history = useHistory();
  React.useEffect(() => {
    const session = http.get('/some-route');
    session.then((result) => {
      if(result.authenticated) {
        history.push('home'); // when user is logged
      }
      history.push('/login'); // not authenticated
    }
  }, [])

  return (
    <AnimatedLodingScreen/>
  );
} 

app.tsx

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { observer } from 'mobx-react';
import { LoaderPage } from 'pages/loaders/LoaderPage';
import { SomeComponent1, SomeComponent2 } from 'pages/index'

export const App: React.FC = observer(() => {
  return (
    <BrowserRouter>
      <LoaderPage>
        <Route path='/home' exact component={SomeComponent1}/>
        <Route path='/login' exact component={SomeComponent2}/>
        // and so on... I have alot of routes in fact these routes are looped via .map and 
        // type-checked i just put it like this for simplicity
      </LoaderPage>
    </BrowserRouter>
  );
});

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'app/app';

ReactDOM.render(<App/>, document.getElementById('root'));

Answer 1

Вы можете использовать состояние, чтобы сохранить, завершена ли загрузка данных или нет, и отобразить дочерние элементы на основе этого

export const LoaderPage = ({ children }:loaderProps) => {
      const history = useHistory();
      const [isLoaded, setLoaded] = React.useState(false)
      const [redirectPath, setRedirectPath] = React.useState('')
      React.useEffect(() => {
        const session = http.get('/some-route');
        session.then((result) => {
          if(result.authenticated) {

            return setRedirectPath('/home') // when user is logged
          }
          setRedirectPath('/login')   // not authenticated

        }
      }, [])

  function redirectToPath() {
  setLoaded(true);
  history.push(redirectPath)
  }


  if(isLoaded) { return <>{children}</> }
  return <AnimatedLodingScreen onAnimationEnd={redirectToPath} /> // onAnimationEnd is the function passed as prop to the component that should be invoked on animation ends

} 

Answer 2

children реквизиты, взятые вашим LoaderPage компонентом, нигде не используются для рендеринга, и, следовательно, ничего не отображается.

export const LoaderPage = ({ children }:loaderProps) => {
  const history = useHistory();
  React.useEffect(() => {
    const session = http.get('/some-route');
    session.then((result) => {
      if(result.authenticated) {
        history.push('home'); // when user is logged
      }
      history.push('/login'); // not authenticated
    }
  }, [])

  return (
    {children || <AnimatedLodingScreen/>}
  );
}