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

使用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路由器5中，它也应该起作用。但是，在React Router 6中，我没有找到重定向，因此上述重定向更有用。

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

Answer 3

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

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

使用useEffect挂钩进行重定向

3 个答案: