alita项目中的动态路由配置

什么是动态路由

动态路由是指路由器能够自动地建立自己的路由表，并且能够根据实际情况的变化适时地进行调整。百度百科

静态路由和动态路由的区别

• 字面区别：
  – 静态路由：静态的（固定的），有固定的路由表，不会随网络的真实场景变化（除非管理员干预）。
  – 动态路由：动态的（不固定），无固定的路由表，会随真实的网络场景进行动态的变化。

• 使用场景区别：
  – 静态路由：一般使用在较为简单的网络。
  – 动态路由：一般使用在较为复杂的网络。

alita项目中配置动态路由

在一个项目中，可能会有很多不同页面之间跳转，当然在大多数情况下可以使用静态路由（方便，好管理），但有时候还是会用到动态路由配置。

配置

创建一个动态路由文件

在alita框架中规定带[]的路径或文件为动态路由。

• 为了不影响已有文件，我们需要创建一个新页面（alita g pages mypage）。

• 将目录src/pages/testpage/index.tsx中的index.tsx改为[index].tsx。

配置之前

这时候没有给testpage页面配置路由，那么我们可以从地址栏手动输入http://localhost:8000/testpage/123
是能够访问此页面的，但是此时再通过布局中点击静态路由的链接。
会出现这样一种情况（假设一个链接配置了静态路由/nextpage）：
http://localhost:8000/testpage/nextpage，这个地址的页面是不存在的，真实的地址应该是：http://localhost:8000/nextpage，这里我们就需要对动态路由配置，解决刚刚出现的这个问题。

页面配置(src/pages/testpage/[index].tsx)

const testpagePage: FC<PageProps> = ({ testpage, dispatch, match }) 

其中的match表示动态路由，它包含了动态路由的参数。

全局布局配置(src/layouts/index.tsx)

在所有已配置好的静态路由地址前加一个/
例：{ route: 'route' } -> { route: '/route' }

在nextpage页面中配置

假设其中有一个静态链接：

import { router } from 'alita';
...
const gotoTestPage = val => {
  router.push(`/testpage/${item.item_id}`);
};
...
<Link key={val.item_id} onClick={() => gotoTestPage(val)}>跳转到testpage</Link>
...

[index].tsx向models传递路由信息

src/pages/testpage

dispatch!({
     type: 'testpage/query',
     payload: {
       itemId: match.params.index,
     },
  });

models接收数据并传递出去

src/models/testpage

yield put({
      type: 'save',
      payload: {
        testPage,	// 注意这里的testPage取自state中，需要自己添加
      },
  });

-

到此为止，我们就配置好的动态路由。
就不会出现【配置之前】的情况了

---

本人学历有限，有问题的地方希望诸位给出指导，谢谢

---