为什么我的动态路由returns一个空白页？

Question

所以我对React.js中的动态路由比较陌生。我遇到了一个问题，大概2小时没解决。我有一个带有博客 posts 的简单网页，我想创建一个 'Read More' 路由，它将重定向到完整的文章页面。

到目前为止，点击这些 link 后，它重定向到正确的 link，但是，它没有显示任何内容。我试了很多东西，但我看不出问题出在哪里。

谁能看看这个项目并告诉我为什么没有渲染？我相信这可能是导入不当的问题，但我看不到哪里。

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

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

Answer 1

看来你弄错了 "export const POSTLINK = '/post/:id';" 因为我点多了，就去'/posts/:id'；（看s）。但是当我尝试更改它时，我遇到了多个我不知道的 firebase 错误。

至少将您的路线更改为：

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

加载正确的组件。

希望对您有所帮助。

Answer 2

有两个问题：

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）

Why my dynamic routing returns a blank page?