用 firebase 反应博客

Question

我正在使用 firebase 数据库创建一个关于 React 的博客，但我不知道如何制作一个 post 页面，您可以在其中更详细地查看文章，以及将在何处显示照片和id ...你能建议怎么做最好吗，也许会有这个主题的例子，提前谢谢）

Answer 1

我刚才做了this repository。你可以试试here

虽然它不包含上传图片的选项，但它可以让您开始。如果您需要任何帮助，请告诉我。

Answer 2

你像这样将 firebase 文档 ID 传递到 url

App.js

<Route path="blog">
   <Route path=":blogid" element={<BlogPageComponent />} />
</Route>

然后你从 url 中获取 BlogPageComponent 中的 id

BlogPageComponent.js

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { doc, getDoc} from "firebase/firestore";
import { db } from "../firebaseConfig"

export const BlogPageCoponent = () => {
const { blogid } = useParams()
const [blog, setBlog] = useState(null)

useEffect(() => {
    const getBlog = async () => {
        const blogRef= doc(db, "blogs", blogid) //database, "blogs" collection, document with id
        const data = await getDoc(blogRef);
        if (data.exists()) {
            setBlog(data.data())
        }
    }
    getBlog()
}, [])

  return (
     <div>
        <h2>{blog.title}</h2>
     </div>
  )
}

假设您在 firebase 文档中有一个“标题：我的博客”

并且在像主页这样的另一个页面中，您有一个 link 可以像这样访问博客

import { NavLink } from 'react-router-dom'
import { collection, getDocs } from "firebase/firestore";


export const Homepage = () => {
const [blogs, setBlogs] useState([])

useEffect(() => {
   const getBlogs = async () => {
      const blogsRef = collection(db, "blogs")
      const data = await getDocs(blogsRef);
      list = []
      data.forEach((doc) => {
         list.push({...doc.data(), id: doc.id})
      })
      setBlogs(list)
   } 
   getBlogs()
}, [])

  return (
    <div>
     {blogs.map((blog, i) => (
        <NavLink key={i} to={"/blog/" + blog.id}>{blog.name}</NavLink>
     )} 
    </div>
   )
 }

package.json

"firebase": "^9.6.10",
"react-router-dom": "^6.0.2",

用 firebase 反应博客

React blog with firebase

firebase

reactjs