使用JSON数据响应路由器ID动态路由

Question

我完全是反应新手。我日复一日地努力提高我的技能。今天我被困在问题上了，我想用JSON字符(这里是龙球z)来创建动态路径，我的路线是正确的，但是我只想显示像“我点击小悟空显示小悟空生物”()这样的点击字符的传记，我想在没有反应钩的情况下完成它(不要useLocation，useParams等)。现在完全被困住了

你能帮我吗？我该怎么做？

谢谢你的帮助:)

以下是我的项目的闪电战：

反应路由器DBZ演习-没有钩子

Answer 1

我不知道为什么您要使用react-router-dom，而不是真正地将它用于设计它的目的。您正在使用函数组件，因此据我所知，任何解决方案都需要一个React钩子。无论是使用useParams钩子来使id筛选，还是在父级中使用useState声明id状态，还是创建一个React上下文并同时使用useState和useContext，还是使用Redux、useDispatch和useSelector。你看到这是往哪里去了吗？

我建议只使用useParams钩子，因为它是最简单的实现。

1. 修复字符bio路由，这样id路由匹配param就更容易阅读和使用。 <路由path="/CharBio/:id“element={} /> 使用path="/CharBio:id"，链接将向id中注入一个带to={`/CharBio${element.id}`}的领先:字符，也就是说，id param将是":goku"，而不是"goku"，这对于过滤并不容易。
2. 修复Perso中的链接，使其链接到"/CharBio/:id"路径。
3. 在useParams组件中使用CharBio钩子，并通过id过滤API数据。 导出默认函数CharBio() { const { id }= useParams()；const元素= API.find(el => el.id === id)；返回元素？{element.bio}：null；}