准备一个编辑内容用的组件，新建一个文件，放在 src/post/edit 里面，名字是 post-edit.tsx，在文件里定义一个组件，名字叫 PostEdit。

这个组件跟我们之前创建的 PostCreate 差不多，打开 PostCreate 组件，复制一下组件里的内容，再回到 PostEdit，把复制的东西粘贴到这个组件里。

下面再导入需要的这些东西，导入 useState，还有 useEffect ，再导入这个 apiHttpClient。

路由

打开 post.routes，在这个文件里再添加一条路由，用一个 Route，路由的 path 设置成 posts/:postId/edit，地址里的 :postId 是一个地址参数。路由的 element 设置成 PostEdit 这个组件。

编辑图标

然后再打开 post-index，先在文件顶部导入一个小图标，名字是 editIcon，位置是 app/icons/edit.svg。

在内容列表项目里添加一个编辑小图标，在这个 item.user.name 的下面，添加一组 div，里面再添加一组 div，包装的东西用一组 Link 组件，设置一下组件的 to 属性，属性的值是内容编辑页面的地址，这里就是 /posts/${item.id}/edit。

链接的内容是一个 img 元素，src 属性的值设置成 editIcon，alt 属性的值设置成“编辑内容”。

测试

在浏览器测试一下，打开内容这个页面，点击内容项目里的这个编辑小图标，打开的就是编辑内容用的这个页面，也就是 PostEdit 组件。注意当前显示的这个页面的地址是 posts/ 后面是内容的 id 号，然后是斜线 edit 。

回到项目，打开 post-edit 组件，页面的标题可以改成“编辑内容”，下面这个创建内容用的函数的名字，改成 editPost，表示编辑内容。组件里的这个提交按钮的点击事件处理改成 editPost，按钮的文字改成“更新”