umijs 4.0学习 - 路由

1.umijs路由 - 配置路由

.umirc.ts 中配置路由router

import { defineConfig } from '@umijs/max';
export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  layout: {
    title: 'xxxxxx',
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
      keepQuery: true //参数带过去
    },
    {
      name: '首页',
      path: '/home',
      component: './Home',
    },
    {
      name: '权限演示',
      path: '/access',
      component: './Access',
    },
    {
      name: '测试',
      path: '/ceshi',
      component: './Ceshi',
    },
    {
      name: ' CRUD 示例',
      path: '/table',
      component: './Table',
    },
  ],
  npmClient: 'pnpm',
});

component: './Table', =====>

可以是绝对路径，也可以是相对路径。如果是相对路径，会从 src/pages 开始寻找。

如果指向 src 目录的文件，可以用 @，比如 component: '@/layouts/basic'，推荐使用 @ 组织路由文件位置。

这里配置的文件会在layout 导航中自动增加

2.path的支持种类

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

3.子路由配置

routes: [
    { path: '/login', component: 'login' },
    {
      name: ' Father 示例',
      path: '/Father',
      component: '@/pages/Father/index.tsx',
      routes: [{ path: 'ceshi', component: './Ceshi' }],
    },
  ],

father
import { Outlet } from 'umi';

const Father: React.FC = () => {
  return (
    <div style={{ padding: 20 }}>
      <div>22222</div>
      <Outlet />
    </div>
  );
};

export default Father;

4.页面权限配置 wrappers

{
      name: ' CRUD 示例',
      path: '/table',
      component: './Table',
      wrappers: ['@/wrappers/auth'],
    },

auth.tsx

import { Navigate, Outlet } from 'umi';

export default (props) => {
  //   const { isLogin } = useAuth();
  if (true) {
    return <Outlet />;
  } else {
    return <Navigate to="/login" />;
  }
};

wrappers 中的每个组件会给当前的路由组件增加一层嵌套路由，如果你希望路由结构不发生变化，推荐使用高阶组件。先在高阶组件中实现 wrapper 中的逻辑，然后使用该高阶组件装饰对应的路由组件。

import { Navigate } from 'umi'

const withAuth = (Component) => ()=>{
  const { isLogin } = useAuth();
  if (isLogin) {
    return <Component />;
  } else{
    return <Navigate to="/login" />;
  }
}

5.关闭layout layout: false,

 {
      name: ' Father1',
      path: '/Father1',
      layout: false,
      component: '@/pages/Father1/index.tsx',
    },

6.约定式路由

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

7.动态路由

8.在src下创建layouts 自定义导航

import { Outlet } from 'umi'

export default function Layout() {
  return <Outlet />
}

9.404 路由

10.路由跳转以及参数传参

Link

<Link to="/users">Users Page</Link> 跳外链 用a标签
// 带参数
<Link to={{
  pathname: '/user',
  query: { id: 123, name: 'test' } // 会被转为 ?id=123&name=test
}}>
  用户页
</Link>

useNavigate

import { useNavigate } from 'umi';

function MyComponent() {
  const navigate = useNavigate();

  const goToHome = () => {
    // 基本用法
    navigate('/home');
    
    // 带参数
    navigate('/user?id=123&name=test');
    
    // 或使用对象形式
    navigate({
      pathname: '/user',
      query: { id: 123 }
    });
    
    // 后退
    navigate(-1);
    
    // 前进
    navigate(1);
  };

  return <button onClick={goToHome}>去首页</button>;
}

useHistory 常用

import { useHistory } from 'umi';

function MyComponent() {
  const history = useHistory();

  const goToAbout = () => {
    // 跳转到指定路由
    history.push('/about');
	history.push({
      pathname: '/user',
      query: { id: 123 }
    });
    
    // 替换当前路由（不会加入历史记录）
    history.replace('/about');
    
    // 后退
    history.goBack();
    
    // 前进
    history.goForward();
  };

  return <button onClick={goToAbout}>去关于页</button>;
}

获取参数

import { useSearchParams, useParams } from 'umi';

function UserPage() {
  // 获取query参数
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id'); // 适用于 ?id=123 形式
  
  // 获取动态路由参数
  const params = useParams();
  const userId = params.id; // 适用于 /user/:id 形式

  return <div>用户ID: {userId}</div>;
}


// 导航时传递状态
navigate('/detail', { state: { from: 'list', data: { id: 1 } } });

// 在目标页面接收状态
import { useLocation } from 'umi';

function DetailPage() {
  const location = useLocation();
  const { from, data } = location.state || {};
  
  return <div>来自: {from}</div>;
}