使用 useEffect 钩子重定向

Question

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

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

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

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

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

这可能吗？或者也许我离题太远了。

非常感谢！

原文由 jvrdom 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Willman.Codes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 React 路由器 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, { 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;

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

原文由 Andrzej 发布，翻译遵循 CC BY-SA 4.0 许可协议