动态路由
动态路由
新建英雄详情页面
使用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/123
两种都可以实现动态路由,可用于需要在url中传参的情况,一般情况下如详情页。
第二种方式,比较大的优点是可以复用hero的model。
这里我们的英雄详情页,使用第一种方式,因为我们的详情页内容比较多。分文件比较清晰。
你可以根据你自己的需要进行选择。
我们两种形式的文件都会保留着。后续使用 ./src/pages/herodetail/
目录下的文件完成英雄详情页。
代码回顾:这节课的全部代码