该视频仅会员有权观看
立即开通课程「React.js 前端应用开发实践」权限。
- 创建一个新文件在
src/post 目录下,文件名为 post。
- 定义与内容相关的路由在
post 文件中。
- 设置一个名为
post rot 的路由,包含一个 rex 元素,使用 react fragment。
- 定义路由
path 为 post,element 属性值为 post index x。
- 在
app arter 添加一个来自 post 目录的 post rot 嵌套路由。
- 设置
app header 组件中的 nave 元素,添加导航链接指向 /post,链接文字为 "内容"。
- 编辑
app.css 文件,为导航添加样式,使用 nap 选择器设置为 flex 布局并设置间隔为 24 像素。
- 为
nav 下的 <a> 元素设置 display:block。
- 重新定义
post index 组件为函数组件,使用 useEffect 设置文档标题为 "内容零号网"。
- 在组件视图中加入标题元素
h1,标题文字为 "内容"。
- 测试在浏览器中访问
/post,应显示 post index 组件的内容。