时间戳

首页 > 解决方案 > 将数据发布到 Heroku 上的 Postgres 数据库后，React App 页面刷新到错误页面

javascript - 将数据发布到 Heroku 上的 Postgres 数据库后，React App 页面刷新到错误页面

问题描述

1. 总结问题

GitHub 仓库：https ://github.com/JorySmith/feature-request-tracker

GitHub 直播项目：https ://jorysmith.github.io/feature-request-tracker/

这是一个简单的特征跟踪器应用程序，React 前端部署在 GitHub 页面上，Node/Postgress 后端部署在 Heroku 上。

在输入字段中输入新功能描述并单击“添加”后，新功能请求会正确发布到我的 Heroku Postgres 数据库中。但是，页面刷新为“https://jorysmith.github.io/”，我收到 404 错误，“这里没有 GitHub Pages 站点。”

编辑和删除数据库中已有的功能也会出现同样的问题。PUT、POST 和 DELETE 可根据需要更改数据库，但页面刷新为“https://jorysmith.github.io/”

特征跟踪器应用程序的图像

2. 描述你尝试过的东西

我在 onSubmitForm 函数中添加了一个e.preventDefaultand ：window.location = '/'

import React, { Fragment, useState } from "react";

const InputFeature = () => {

  const [description, setDescription] = useState("")

  const onSubmitForm = async (e) => {
    e.preventDefault();
    try {
      const body = { description }
      const response = await fetch("https://feature-request-tracker-api.herokuapp.com", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      })
      window.location = '/'
    } catch (err) {
      console.error(err.message)
    }
  }

  return (
    <Fragment>
      <h1 className="text-center mt-5">Feature Request Tracker</h1>
      <h3 className="text-center mt-1">A React CRUD App</h3>
      <form className="d-flex mt-5" onSubmit={onSubmitForm}>
        <input type="text" className="form-control" value={description} onChange={e => setDescription(e.target.value)} />
        <button className="btn btn-success">Add</button>
      </form>
    </Fragment>
  )

}

export default InputFeature

我还将 GET 和 POST 的端点更改为“/”，将 PUT 和 DELETE 的端点更改为“/:id”：

// Add a feature request
app.post("/", async (req, res) => {
  try {
    const { description } = req.body
    const newFeature = await pool.query(
      "INSERT INTO featurerequest (description) VALUES ($1) RETURNING *",
      [description]
    )
    res.json(newFeature.rows[0])
  } catch (error) {
    console.error(error.message)
  }

})

// Get one feature request
app.get("/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const feature = await pool.query(
      "SELECT * FROM featurerequest WHERE feature_id = $1",
      [id])

    res.json(feature.rows[0])

  } catch (error) {
    console.error(error.message)
  }
})

// Update one feature request
app.put("/:id", async (req, res) => {
  try {
    const { id } = req.params
    const { description } = req.body
    const updateFeature = await pool.query(
      "UPDATE featurerequest SET description = $1 WHERE feature_id = $2",
      [description, id]
    )

    res.json("Feature was updated.")

  } catch (error) {
    console.error(error.message)
  }
})

// Delete one feature request
app.delete("/:id", async (req, res) => {
  try {
    const { id } = req.params
    const deleteFeature = await pool.query(
      "DELETE FROM featurerequest WHERE feature_id = $1",
      [id]
    )
    res.json("Feature was deleted.")

  } catch (error) {
    console.error(error.message)
  }
})

标签： javascriptnode.jsreactjspostgresqlheroku

解决方案

感谢 Lakshman，他指出要添加到我的 index.html：

<base href="%PUBLIC_URL%/">

我还必须更改window.location = '/'为window.location = '/feature-request-tracker/'使用它的地方。

推荐阅读