使用 useEffect 钩子重定向 [英] Redirecting using useEffect hook

问题描述

这个想法是我有一个组件可以呈现一些东西，但同时正在检查一些将返回或重定向到另一个组件的东西:

useEffect(() => {(() => {如果属实) {//返回一个组件}//返回另一个组件})();});返回 (<div>哈维尔 </div>);

我认为可以使用 useEffect hook，但问题是，它没有重定向到我的组件，我尝试使用 Redirect 从 >react-router，返回组件本身，并使用 history 包，在这种情况下，只替换了 url，但根本没有重定向.

这可能吗?或者也许我离题了.

非常感谢！

解决方案

如果您只需要条件渲染，您可以这样做:

const LoadingComponent = () =><div>哈维尔 </div>功能着陆(道具){const [state={notLoaded:true}, setState] = useState(null);useEffect(() => {const asyncCallback = async() =>{const data = await axios.get('/someApiUrl')设置状态(数据)}异步回调()},[]);如果(！状态){返回 }如果(状态.未加载){//返回一些加载组件(或没有避免闪烁)返回 <LoadingComponent/>//- 或 - 返回 
}返回 <TruthyComponent/>}

或完全重定向:

const LoadingComponent = () =><div>哈维尔 </div>功能着陆(道具){const [state={notLoaded:true}, setState] = useState(null);useEffect(() => {const asyncCallback = async() =>{const data = await axios.get('/someApiUrl')设置状态(数据)}异步回调()},[]);如果(！状态){return <Redirect to='/falseyRoute'/>}如果(状态.未加载){//返回一些加载组件或(没有避免闪烁)返回 <LoadingComponent/>//- 或 - 返回 
}return <Redirect to='/truthyRoute'/>}

The idea is that I've got a component that renders something but in the meantime is checking something that will return or redirect to another component:

useEffect(() => {
  (() => {
    if (true) {
      // return to one component
    }

    // return to another component
  })();
});

return (
  <div> Javier </div>
);

I think that it is possible using the useEffect hook, but the problem is that, it does not redirect to my components, I tried using Redirect from the react-router, returning the component itself, and also using the history package, in this case, only replaced the url but no redirection at all.

Is this possible? Or maybe I'm way off the point.

Thanks a lot!

解决方案

if you are just needing conditional rendering you could do something like this:

const LoadingComponent = () => <div> Javier </div>

function Landing(props) {
    const [state={notLoaded:true}, setState] = useState(null);
    useEffect(() => {
        const asyncCallback = async () =>{
            const data = await axios.get('/someApiUrl')
            setState(data)
        }

        asyncCallback()
    },[]);

    if(!state){
        return <FalseyComponent />
    }
    if(state.notLoaded){
        //return some loading component(s) (or nothing to avoid flicker)
        return <LoadingComponent /> // -or- return <div/>
    }
    return <TruthyComponent />
}

or redirect completely:

const LoadingComponent = () => <div> Javier </div>

function Landing(props) {
    const [state={notLoaded:true}, setState] = useState(null);
    useEffect(() => {
        const asyncCallback = async () =>{
            const data = await axios.get('/someApiUrl')
            setState(data)
        }

        asyncCallback()
    },[]);

    if(!state){
        return <Redirect to='/falseyRoute' />
    }
    if(state.notLoaded){
        //return some loading component(s) or (nothing to avoid flicker)
        return <LoadingComponent /> // -or- return <div/>
    }
    return <Redirect to='/truthyRoute' />
}

这篇关于使用 useEffect 钩子重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！