为啥我的动态路由返回一个空白页？

Posted 2023-02-22

【中文标题】为啥我的动态路由返回一个空白页？

【英文标题】：Why my dynamic routing returns a blank page?为什么我的动态路由返回一个空白页？

【发布时间】：2019-10-23 00:19:24

【问题描述】：

所以我对 React.js 中的动态路由比较陌生。 我遇到了一个问题，大约在过去 2 小时内我无法解决。 我有一个简单的网页，上面有博客文章，我想创建一个“阅​​读更多”路线，该路线将重定向到完整的文章页面。

到目前为止，单击这些链接后，它会重定向到正确的链接，但是，它没有显示任何内容。 我尝试了很多方法，但我看不出问题出在哪里。

谁能看看这个项目，让我知道为什么什么都没有渲染？我认为这可能是不正确导入的问题，但我看不到在哪里。

请参阅此项目的 GitHub 存储库。有 App.js、Post.js、Postlink.js 和 Post.js 我想相互连接。

Postlink.js 是我想要呈现我的帖子的全部内容但它没有被 React 呈现的页面。

https://github.com/szygendaborys/LiderAPP

【参考方案1】：

有两个问题：

1) 你的路线匹配错误（你写了post/:id 而应该是posts/:id）：

export const POSTLINK = '/posts/:id'

2) 在您的 Postlink componentDidMount() 中，您需要将 firebase.posts 作为函数调用

 const ref = this.props.firebase.posts().doc(this.props.match.params.id)

（在你的仓库中是this.props.firebase.posts.doc）

【讨论】：

1) 哦，太好了，真是个愚蠢的错误：D 谢谢！ 2）感谢您指出这一点，我相信今天不是我的日子：D

【参考方案2】：

您似乎在“export const POSTLINK = '/post/:id';”上犯了一个错误 因为当我点击更多时，我会转到'/posts/:id'； （观看 s）。但是当我尝试更改它时，我得到了多个我不知道的 firebase 错误。

至少改变你的路线到：

"export const POSTLINK = '/posts/:id';"

加载正确的组件。

希望这会有所帮助。