利用useContext使用ReactRouter

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个对象。