关于路由的方法

1. histroy API

import { history } from 'umi';

history.length // 获取历史路由列表长度
history.action // 值是push、replace或pop，具体取决于用户如何到达当前url
history.location // 获取当前路由信息
history.location.pathname // 当前路由名称
history.location.query // 路由携带的字符串参数(对象)
history.location.search // 路由携带的参数(字符串，包含?)
history.location.state // 路由携带的状态参数

// 跳转到指定路径
history.push('/user')

history.push('/user?id=10')
history.push({
    pathname: '/user',
    query: {
        id: '10'
    }
})

// 以下这种方式传递数据，不会暴露在路径中
history.push('/user',{id:10})
history.push({
    pathname: '/user',
    state:{
        id:10
    }
})

// 拼接参数,不执行页面跳转(参数等同于history.push)
history.replace('/user?id=12')

// 跳转到指定的历史路径
history.go( number | URL );

// 跳转到上一个路径
history.goBack();

// 跳转到下一个路径
history.goForward();

2. react-router-dom API

import { useLocation , useSearchParams , useParams , useNavigate } from 'react-router-dom';

const About = () => {

  const location = useLocation();
  const params =useParams();
  const [ searchParams ] = useSearchParams();
  const navigate = useNavigate();

  // 获取路由信息
  console.log(location);

  // 查询动态参数
  console.log(params);
  // 查询字符串参数
  console.log(searchParams.get('id'));
  // 查询state参数
  console.log(location.state);

  // 传递动态参数
  navigate('/login/17');
  // 传递字符串参数
  navigate('/login?id=10')
  // 传递state属性携带参数
  navigate('/login',{state: '我从登陆页面过来了！！！'})

  return ''
}