利用useContext使用ReactRouter

利用React Hook的useContext使用React Router的history.push等api,使用useReducer管理数据。

React Router 的history.push

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import React, { useState, useContext, useEffect } from 'react';
import { __RouterContext } from "react-router";

const Login: React.FC = () => {
  const [token, setToken] = useState('');
  const { history } = useContext(__RouterContext);

  useEffect(() => {
    if (token) {
      history.push('/list')
    }
  }, [token, history]);

  return (
    <>
      <button onClick={()=>setToken('666')}>登录</button>
    </>
  );
}

这段代码的逻辑是,等级登录按钮,设置token变量。当token变量变化时,触发useEffect调用ReactRouter的history.push切换路由。history对象是通过useContext获得到的,可以拿到location、history、match等3个对象。

updatedupdated2020-10-122020-10-12

keywords: React Hook useReducer useContext React Router