Javascript 使用useffect钩子重定向

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

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

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

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

useffect（（）=>{
(() => {
如果（真）{
//返回到一个组件
}
//返回到另一个组件
})();
});
返回(
哈维尔
);

我认为可以使用

useffect钩子

，但问题是，它不会重定向到我的组件，我尝试从

react路由器

使用

redirect

，返回组件本身，还使用

历史

包，在这种情况下，只替换了url，但根本没有重定向

这可能吗？或者我说的太离题了

---

非常感谢

尝试根据如下状态值返回

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

从“react router dom”导入{Redirect}//先导入重定向
const[redictto，setredictto]=useState（false）；//要操纵的状态值
useffect（（）=>{
(() => {
如果（真）{
setRedirctTo（真）
}
//返回到另一个组件
})();
});
if（redirctTo）{
返回
}否则{
返回(
哈维尔
);
}

如果您只需要条件渲染，可以执行以下操作：

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=（）=>Javier
功能着陆（道具）{
const[state={notLoaded:true}，setState]=useState（null）；
useffect（（）=>{
常量asyncCallback=async（）=>{
const data=await axios.get（“/someapirl”）
设置状态（数据）
}
asyncCallback（）
},[]);
如果（！状态）{
返回
}
if（state.notLoaded）{
//返回一些加载组件（或不返回任何内容以避免闪烁）
return/-或-return
}
返回
}

或完全重定向：

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

const LoadingComponent=（）=>Javier
功能着陆（道具）{
const[state={notLoaded:true}，setState]=useState（null）；
useffect（（）=>{
常量asyncCallback=async（）=>{
const data=await axios.get（“/someapirl”）
设置状态（数据）
}
asyncCallback（）
},[]);
如果（！状态）{
返回
}
if（state.notLoaded）{
//返回一些加载组件或（无需避免闪烁）
return/-或-return
}
返回
}

使用React router v6，您可以使用useEffect创建重定向：

import React, { useEffect } from 'react';
import {
  BrowserRouter, Route, Routes, useNavigate,
} from 'react-router-dom';

const App = () => (
  <div>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>
  </div>
);

const Main = () => {
  const navigate = useNavigate();
  useEffect(() => {
    let didCancel = false;
    const goToHomePage = () => navigate('/home');
    if (!didCancel) { goToHomePage(); }
    return () => { didCancel = true; };
  }, [navigate]);
  return (
    <div>
      <h1>Welcome Main!</h1>
    </div>
  );
};

const Home = () => (
  <div>
    <h1>Welcome Home!</h1>
  </div>
);

export default App;

import React，{useffect}来自“React”；
进口{
浏览器路由器，路由，路由，使用导航，
}从“反应路由器dom”；
常量应用=（）=>(
);
常量Main=（）=>{
const-navigate=useNavigate（）；
useffect（（）=>{
让我们取消=错误；
const goToHomePage=（）=>导航（'/home'）；
如果（！didconcel）{goToHomePage（）；}
return（）=>{didCancel=true；}；
}，[导航]；
返回(
欢迎光临！
);
};
常量Home=（）=>(
欢迎回家！
);
导出默认应用程序；

如果要创建到另一个组件的替代重定向，可以按如下操作：

import React, { useEffect } from 'react';
import {
  BrowserRouter, Route, Routes, useNavigate,
} from 'react-router-dom';

const App = () => (
  <div>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/home" element={<Home />} />
        <Route path="/other" element={<Other />} />
      </Routes>
    </BrowserRouter>
  </div>
);

const Main = () => {
  const navigate = useNavigate();
  useEffect(() => {
    let didCancel = false;
    const goToHomePage = () => navigate('/home');
    const goToOtherPage = () => navigate('/other');
    if (!didCancel) { goToHomePage(); } else { goToOtherPage(); }
    return () => { didCancel = true; };
  }, [navigate]);
  return (
    <div>
      <h1>Welcome Main!</h1>
    </div>
  );
};

const Home = () => (
  <div>
    <h1>Welcome Home!</h1>
  </div>
);

const Other = () => (
  <div>
    <h1>Welcome Other!</h1>
  </div>
);

export default App;

import React，{useffect}来自“React”；
进口{
浏览器路由器，路由，路由，使用导航，
}从“反应路由器dom”；
常量应用=（）=>(
);
常量Main=（）=>{
const-navigate=useNavigate（）；
useffect（（）=>{
让我们取消=错误；
const goToHomePage=（）=>导航（'/home'）；
const goToOtherPage=（）=>导航（'/other'）；
if（！didconcel）{goToHomePage（）；}else{goToOtherPage（）；}
return（）=>{didCancel=true；}；
}，[导航]；
返回(
欢迎光临！
);
};
常量Home=（）=>(
欢迎回家！
);
常量其他=（）=>(
欢迎其他人！
);
导出默认应用程序；

---

在修改了旧语法的React router 5中，它也应该可以工作。但是，在React router 6中，我没有找到重定向，因此上面的重定向更有用。

可能会有帮助：@jvrdom看看我的回答在React router v6中，

重定向

被重命名为

导航

，就像

历史

被重命名为

导航

。另外，我更喜欢在

useffect

中重定向，而不是返回

组件。