ant design pro路由跳轉

如果是菜單跳轉,只需要在cofig/route.ts文件中增加頁面信息,點擊菜單就能跳轉到對應頁面

 

如果是頁面鏈接跳轉,有兩種,

1.可以通過link鏈接類似vue的router-link

2.通過history.push 類似vue的router.push

文檔地址  https://pro.ant.design/zh-CN/config/api

 

link用法

import { Link } from 'umi';

export default () => {
  return (
    <div>
      {/* 點擊跳轉到指定 /about 路由 */}
      <Link to="/about">About</Link>

      {/* 點擊跳轉到指定 /courses 路由，
         附帶 query { sort: 'name' }
     */}
      <Link to="/courses?sort=name">Courses</Link>

      {/* 點擊跳轉到指定 /list 路由，
         附帶 query: { sort: 'name' }
         附帶 hash: 'the-hash'
         附帶 state: { fromDashboard: true }
     */}
      <Link
        to={{
          pathname: '/list',
          search: '?sort=name',
          hash: '#the-hash',
          state: { fromDashboard: true },
        }}
      >
        List
      </Link>

      {/* 點擊跳轉到指定 /profile 路由，
         附帶所有當前 location 上的參數
     */}
      <Link
        to={(location) => {
          return { ...location, pathname: '/profile' };
        }}
      />

      {/* 點擊跳轉到指定 /courses 路由，
         但會替換當前 history stack 中的記錄
     */}
      <Link to="/courses" replace />

      {/*
         innerRef 允許你獲取基礎組件（這里應該就是 a 標簽或者 null）
     */}
      <Link
        to="/courses"
        innerRef={(node) => {
          // `node` refers to the mounted DOM element
          // or null when unmounted
        }}
      />
    </div>
  );
};

history 用法

import { history } from 'umi';

// history 棧里的實體個數
console.log(history.length);

// 當前 history 跳轉的 action，有 PUSH、REPLACE 和 POP 三種類型
console.log(history.action);

// location 對象，包含 pathname、search 和 hash
console.log(history.location.pathname);
console.log(history.location.search);
console.log(history.location.hash);
可用於路由跳轉，


import { history } from 'umi';

// 跳轉到指定路由
history.push('/list');

// 帶參數跳轉到指定路由
history.push('/list?a=b');
history.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
});

// 跳轉到上一個路由
history.goBack();

// 跳轉到上一個路由
history.goBack();

獲取跳轉的參數

 

跳轉過去通過props可以獲取到

也可以通過useLocation獲取到

 

如果是這種地址格式 /users/:id  通過useParams獲取

import { useParams } from 'umi';

export default () => {
  const params = useParams();
  return (
    <div>
      <ul>
        <li>params: {JSON.stringify(params)}</li>
      </ul>
    </div>
  );
};