Reactjs history.push是否应该渲染与管线关联的组件？

因此，我创建了一个加载器组件，它向服务器请求数据，然后根据响应——然后加载器页面将数据重定向/重新路由到其他页面

但是由于某些原因，

history.push

会更改路由，但不会呈现组件，并保留在

组件中。不知道我错过了什么。所以请帮忙

我已经用

组件包装了所有页面，因为我的目标是每当用户访问

组件首先呈现的任何路由时，它都会执行其工作，然后将用户重定向/重新路由到其他页面

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/>
  );
} 

从“React”导入React；
从“react router dom”导入{useHistory}
从“./loaders/AnimatedLodingScreen”导入{AnimatedLodingScreen}
类型loaderProps={
子节点：React.ReactNode；
};
export const LoaderPage=（{children}:loaderProps）=>{
const history=useHistory（）；
React.useffect（（）=>{
const session=http.get（“/some route”）；
会话。然后（（结果）=>{
if（result.authenticated）{
history.push（'home'）；//用户登录时
}
history.push（'/login'）；//未通过身份验证
}
}, [])
返回(
);
} 

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>
  );
});

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从'mobx react'导入{observer}；
从“pages/loaders/LoaderPage”导入{LoaderPage}；
从“页面/索引”导入{SomeComponent1，SomeComponent2}
导出常量应用程序：React.FC=观察者（（）=>{
返回(
//等等…我有很多路线，事实上这些路线是通过。地图和
//类型检查我只是把它像这样简单
);
});

index.tsx

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

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

从“React”导入React；
从“react dom”导入react dom；
从'App/App'导入{App}；
ReactDOM.render（，document.getElementById（'root'））；

您的

加载页面

组件所使用的

子组件

道具不用于渲染其中的任何位置，因此不会渲染任何内容

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/>}
  );
} 

export const LoaderPage=（{children}:loaderProps）=>{
const history=useHistory（）；
React.useffect（（）=>{
const session=http.get（“/some route”）；
会话。然后（（结果）=>{
if（result.authenticated）{
history.push（'home'）；//用户登录时
}
history.push（'/login'）；//未通过身份验证
}
}, [])
返回(
{儿童| |}
);
} 

您的

加载页面

组件所使用的

子组件

道具不用于渲染其中的任何位置，因此不会渲染任何内容

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/>}
  );
} 

export const LoaderPage=（{children}:loaderProps）=>{
const history=useHistory（）；
React.useffect（（）=>{
const session=http.get（“/some route”）；
会话。然后（（结果）=>{
if（result.authenticated）{
history.push（'home'）；//用户登录时
}
history.push（'/login'）；//未通过身份验证
}
}, [])
返回(
{儿童| |}
);
} 

您可以使用状态保存数据加载是否完成，并基于该状态呈现子级

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

} 

export const LoaderPage=（{children}:loaderProps）=>{
const history=useHistory（）；
常量[isLoaded，setLoaded]=React.useState（false）
const[redirectPath，setRedirectPath]=React.useState（“”）
React.useffect（（）=>{
const session=http.get（“/some route”）；
会话。然后（（结果）=>{
if（result.authenticated）{
当用户登录时返回setRedirectPath（'/home'）//
}
setRedirectPath（'/login'）//未通过身份验证
}
}, [])
函数redirectToPath（）{
setLoaded（真）；
history.push（重定向路径）
}
if（isLoaded）{return{children}
return//onAnimationEnd是作为prop传递给组件的函数，该组件应在动画结束时调用
} 

您可以使用状态保存数据加载是否完成，并基于该状态呈现子级

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

} 

export const LoaderPage=（{children}:loaderProps）=>{
const history=useHistory（）；
常量[isLoaded，setLoaded]=React.useState（false）
const[redirectPath，setRedirectPath]=React.useState（“”）
React.useffect（（）=>{
const session=http.get（“/some route”）；
会话。然后（（结果）=>{
if（result.authenticated）{
当用户登录时返回setRedirectPath（'/home'）//
}
setRedirectPath（'/login'）//未通过身份验证
}
}, [])
函数redirectToPath（）{
setLoaded（真）；
history.push（重定向路径）
}
if（isLoaded）{return{children}
return//onAnimationEnd是作为prop传递给组件的函数，该组件应在动画结束时调用
} 

尝试在loader组件中渲染

子对象

，据我所知，您必须仅在数据加载完成之前渲染

，之后您可以在loader组件中直接返回childrentry rendering

子对象

，据我所知，您必须仅在数据加载完成之前渲染

，在你可以直接返回孩子吗？啊，我明白了，现在我要做的是的动画计时，因为我只想做

历史。当实际动画完成后，按
。（一瞬间）有什么想法吗？：）@swoopy您可以使用
onAnimationEnd
事件来检查元素触发器
历史记录上的动画是否完成。在该事件中按下
。是的，准确地说，存储您要重定向到的路由的状态，并在
onAnimationEnd
重定向到该组件上。但是，如果您是执行此操作的人，您将如何执行此操作？正在使用hooks理想的方法？我只是用useEffect来模拟组件DidMount（）@swoopy更新了我的答案，我想它会对你有用的啊，我明白了，现在我开始研究动画计时