Question

组件挂载时 React hook 重定向

2019-08-15

12742

javascript reactjs ecmascript-6 react-router react-hooks

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

我通常会在类组件中执行此操作：

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() 返回一个函数，它只会在组件卸载时工作。但它应该在安装组件时重定向。

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

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

Answer 2

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

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

但是，如果您仍然想在使用 React Hooks 实现此功能时使用 context，您可以阅读此文章中了解如何将 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>
  );
};

Answer 3

从“react-router-dom”导入{Redirect，Switch}；

并在Switch内部....

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

这解决了我的问题。