React backpress 在屏幕上打印 axios 响应

Question

我创建了一个 React 应用程序，它运行良好，但问题是，当我单击后退按钮时，屏幕变白并打印 axios get 或 post 请求的响应。

这是我的使用效果：

useEffect(() => {
        async function loadIBooks() {
            const response = await axios.get(
                `/Bookss?_type=${BooksType}&_page=${page}`
            );

            setBookss(response.data.data);

            if (response.data.data.length === 0) {
                setNoBookss(true);
            } else setNoBookss(false);
            setLoading(false);
        }
        loadBookss();
    }, [page, BooksType]);

这是我的路线数据：

router.get("/books", async (req, res) => {
    const allbooks = await bookSchema
        .find({
            status: "Published",
            bookType: req.query._type,
        })
        .sort({ _id: -1 });

    res.json({
        data: allbooks,
        status: res.status,
    });
});

它首先正确显示数据，但是当我转到下一页并返回时，它会打印 axios 响应。

Answer 1

我通过在 server.js

中添加静态部分解决了这个问题

if (process.env.NODE_ENV == "production") {
    app.use(express.static("./client/build"));
    const path = require("path");
    app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
    });
}

React backpress 在屏幕上打印 axios 响应

React backpress prints axios response on the screen

heroku

mongodb

node.js

reactjs

axios