Перенаправление с помощью ловушки useEffect

Question

Идея в том, что у меня есть компонент, который визуализирует что-то, но в то же время проверяет что-то, что будет возвращать или перенаправлять на другой компонент:

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

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

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

Я думаю, что это возможно с помощью useEffect hook, но проблема в том, что он не перенаправляет на мои компоненты, я пытался использовать Redirect из react-router, возвращая сам компонент, а также используя пакет history, в этом случае только заменилURL, но не перенаправление вообще.

Возможно ли это? Или, может быть, я далеко от темы.

Большое спасибо!

Answer 1

если вам нужен только условный рендеринг, вы можете сделать что-то вроде этого:

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

или полностью перенаправить:

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' />
}

Answer 2

Попробуйте вернуться на основе некоторого значения состояния, подобного этому.

import { Redirect } from "react-router-dom"; //import Redirect first

const [redirctTo, setRedirctTo] = useState(false); // your state value to manipulate

useEffect(() => {
  (() => {
    if (true) {
      setRedirctTo(true)
    }

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

if(redirctTo){
  return <Redirect to="/your-url" />
} else {
  return (
  <div> Javier </div>
);
}