动态路由

动态路由

新建英雄详情页面

使用umi创建页面

$ umi g page herodetail/ename
   create src/pages/herodetail/ename.js
   create src/pages/herodetail/ename.css

重命名herodetail/ename.js

./src/pages/herodetail/ename.js =>./src/pages/herodetail/$ename.js umi 里约定，带 $ 前缀的目录或文件为动态路由。

在页面中取得动态路由传参

export default function ({ match }) {
  //    isExact: true
  //    params:
  //        ename: "123"
  //    path: "/herodetail/:ename"
  //    url: "/herodetail/123"
  console.log(match);
  return (
    <div className={styles.normal}>
      <h1>herodetail Page ename</h1>
    </div>
  );
}

动态路由的参数通过match，这里打印的值，如上述标注。相当于this.props.match。 上述是约定式路由的用法，如果你是使用配置式路由，那你可以设置

{ path: '/herodetail/:ename', component: './pages/herodetail/$ename.js' },

访问http://localhost:8000/herodetail/123

可选的动态路由

新建文件 ./src/pages/hero/\$ename\$.js

export default function ({ match }) {
  console.log(match);
  return (
    <div >
      <h1>herodetail ename Page ename</h1>
    </div>
  );
}

hero page 的目录结构如下

.
├── $ename$.js
├── components
│   └── FreeHeroItem.js
├── index.js
├── index.less
├── models
│   └── hero.js
└── services

访问http://localhost:8000/hero

访问http://localhost:8000/hero/123

两种都可以实现动态路由，可用于需要在url中传参的情况，一般情况下如详情页。 第二种方式，比较大的优点是可以复用hero的model。 这里我们的英雄详情页，使用第一种方式，因为我们的详情页内容比较多。分文件比较清晰。 你可以根据你自己的需要进行选择。 我们两种形式的文件都会保留着。后续使用 ./src/pages/herodetail/ 目录下的文件完成英雄详情页。

代码回顾：这节课的全部代码