路由反应路由器不渲染我的组件答案

【问题标题】：Routes react router not rendering my component路由反应路由器不渲染我的组件
【发布时间】：2022-10-23 23:01:58
【问题描述】：

我正在使用 react-router-dom，但我不明白为什么它没有渲染我的组件。

所以在我的 Home.js 组件中我得到了这个：

export default function Home() {
  return (
    <div>
        <Routes>
            <Route path="/pokemon/:name" element={<Profil />} />
            <Route path="*" element={<List />} />
        </Routes>
    </div>
  )
}

当我单击卡片（Cards.js）时，我尝试显示 Profile.js：

return (
        <Container onClick={() => navigate(`/pokemon/${name}`)}>
            <figure>
                <img className="img" src={image} alt={name} />
            </figure>
            <div className="pokemon-info">
                <p className="prefix">
                    <span>No.</span>
                    <span style={{ marginRight: "7px" }}>{idFormat(id, 3)}</span>

                    <AiOutlineInfoCircle />
                </p>
                <h5>{capitalizeName(name)}</h5>
                <div className="abilities">
                    <span className={typeColor}>{type}</span>
                    <span className={secondTypeColor}>{secondType}</span>
                </div>
            </div>
        </Container>
    )

【问题讨论】：

请编辑帖子以包含实际的格式化代码 sn-ps 代替代码图片。图像无法访问并且可能更难以阅读，更重要的是，这里的用户无法复制/粘贴您的代码来使用它。见minimal reproducible example。与路线的第一个代码相比，第二个代码到底是什么？
你能更具体一点是什么问题吗？不确定您指的是什么组件以及什么路线
“当我点击卡片 (Cards.js) 时，我尝试显示 Profile.js” - 第二个代码 sn-p 是 List 组件在 path="*" 中呈现的东西，即它正在呈现这些列表口袋妖怪对象和Container 组件是可点击的？看到更完整和全面的minimal reproducible example 仍然会很高兴，这样我们就可以看到任何导航操作在什么地方以及在哪里受到影响。

标签： reactjs react-router-dom

【解决方案1】：

对不起，我是这里的新手。问题已解决，我没有调用我放置所有路径的主文件（Home.js）。

【讨论】：

请使用您问题上的编辑链接添加其他信息。 Post Answer 按钮应仅用于问题的完整答案。 - From Review

【解决方案2】：

尝试使用来自反应路由器 dom 的链接包装容器

 <Link to="/pokemon/${id}" style={{ textDecoration: "none" }}>
 <Container>
 ...
 </Container>
 </Link>

还要确保你的顶级组件用来自 react router dom 的<BrowerRouter> 包裹在这里阅读更多https://reactrouter.com/en/main/start/concepts#link

【讨论】：

如果需要外部资源来帮助解释您的答案，那么它可能应该是答案的一部分，而不是隐藏在评论中。链接到official docs 而不是一些随机的博客也可能更有意义；大概react-router 的维护者解释了他们的库是如何工作的。
我只是不明白为什么我以这种方式使用它并且它适用于我的项目，但是我已经用 react router dom docs 的链接更新了我的答案
我无法解释为什么人们会以他们的方式投票。试着记住，什么您的代码在您的项目确实不一定与其他人项目中的代码正在做什么一致。假设路由器、路由和useNavigate 挂钩均已正确配置/使用，则 OP 代码中的onClick={() => navigate(.....)} 没有任何问题。事实上，如果不是这种情况，那么 URL 就不会改变，并且 OP 可能会询问错误。因为他们不是我不认为在这里使用 Link 会改变 OP 正在做的任何事情。