使用 useEffect 钩子重定向

我的想法是，我有一个渲染某些内容的组件，但同时正在检查将返回或重定向到另一个组件的内容：

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

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

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

我认为可以使用useEffect hook，但问题是，它没有重定向到我的组件，我尝试使用Redirect来自react-router，返回组件本身，并且还使用history在本例中，package 仅替换了 url，但根本没有重定向。

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

多谢！

使用 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, { 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，所以上面的重定向更有用。