组件挂载上的 React hook Redirect

Posted

技术标签:

【中文标题】组件挂载上的 React hook Redirect【英文标题】:React hook Redirect on component mount 【发布时间】:2019-12-22 05:08:46 【问题描述】:

我在成功登录后尝试管理会话,同时重定向到表单提交时的某个页面。

我通常会在类组件中这样做:

componentDidMount() 
    if (context.token) 
        return <Redirect to="/" />
    

但是我想使用 React 钩子,因此;以下代码不会重定向到任何地方:

import React,  useEffect  from "react";
import ReactDOM from "react-dom";
import  BrowserRouter, Switch, Route, Redirect, Link  from "react-router-dom";
es6
const HomePage = props => (
  <div>
    <h1>Home</h1>
  </div>
);

const AboutUsPage = props => 
  useEffect(() => 
    redirectTo();
  , []);
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
;

function redirectTo() 
  return <Redirect to="/" />;


function App() 
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/us">About us</Link>
        </nav>
        <Switch>
          <Route exact path="/" component=HomePage />
          <Route exact path="/us" component=AboutUsPage />
        </Switch>
      </BrowserRouter>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作沙盒:https://codesandbox.io/s/blue-river-6dvyv?fontsize=14

我已经读到如果钩子useEffect() 返回一个函数,它只会在组件卸载时起作用。但它应该在组件被挂载时重定向。

有什么建议吗?提前致谢。

【问题讨论】:

【参考方案1】:

您可以在状态上设置redirect 变量并基于它在渲染中重定向:

const AboutUsPage = props => 
  const [redirect, setRedirect] = useState(false);

  useEffect(() => 
    setRedirect(true); // Probably need to set redirect based on some condition
  , []);

  if (redirect) return redirectTo();
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
;

【讨论】:

这行得通,但是如果我可以在redirectTo() 中进行相同的逻辑,我为什么要使用useEffect()?我可以完全省略钩子并在返回 JSX 之前调用函数。 这取决于,如果你只想做一个重定向,那么无论如何都不需要 Hook。但是如果你有一些复杂的逻辑连接到组件的状态来决定是否重定向,你需要使用 Hook。【参考方案2】:

您可以使用它,以便组件根据页面是否被赋予令牌来选择性地呈现页面。

const AboutUsPage = (token) => (
  token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  )
);

但是,如果您在使用 React Hooks 实现此功能时仍想使用上下文,您可以在此 article 中阅读如何将 context 与钩子一起使用。它向您展示了如何仅用几行代码将 context 合并到 React 中。

import React, createContext, useContext, useReducer from 'react';
export const StateContext = createContext();
export const StateProvider = (reducer, initialState, children) =>(
  <StateContext.Provider value=useReducer(reducer, initialState)>
    children
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

使用钩子和上下文完成后,您的 AboutUsPage 组件将类似于这样。

import  useStateValue  from './state';
const AboutUsPage = () => 
  const [token, dispatch] = useStateValue();
  return token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  );
;

【讨论】:

【参考方案3】:

从“react-router-dom”导入Redirect, Switch;

在 Switch 内部......

<Switch>
      <Redirect exact from="/" to="/home" />
</Switch>

这解决了我的问题。

【讨论】:

以上是关于组件挂载上的 React hook Redirect的主要内容,如果未能解决你的问题,请参考以下文章

项目上的 React Hook

清除 React Hooks 中未安装组件上的内存泄漏

useState和useEffect

react父子组件生命周期执行顺序

选择上的 forwardRef 不会使用 react-hook-form 保存选择的值

React Hooks - 从 DOM 中临时删除组件而不卸载它的最佳方法