React.js 中出现 useContext 数据加载错误 404 的问题

Question

大家下午好，我已经完成了我的项目并将其上传到 Netlify。我在重新加载页面时遇到了这个麻烦，我收到错误 404。我猜控制台说我得到了一个未定义的，因为端点没有获取数据。我该如何解决或重构我的代码才能解决这个问题，有什么建议吗？:

这是我的 useContext：

import React, { createContext, useState, useEffect } from 'react';

export const ModelsContext = createContext();

const ModelsProvider = (props) => {

        //State de modelos
        const [ modelo, guardarModelo ] = useState([]);
        const [ modelos, guardarModelos ] = useState([]);
        const [ allModelos, guardarAllModelo ] = useState([]);

        const { id } = modelo;

        console.log(id);

         //Cargar un modelo
         useEffect(() => {
             const consultarAPI = async () => {         
                try {
                    const api = await fetch("https://challenge.agenciaego.tech/models");
                    const modelos = await api.json();
    
                    const api2 = await fetch(`https://challenge.agenciaego.tech/models/${id ? id : ""}`);
                    const modelo = await api2.json();
           
                    guardarAllModelo(modelos);
                    guardarModelos(modelos);
                    guardarModelo(modelo);

                } catch (error) {
                   console.log(error); 
                }
             }
             consultarAPI()
         }, [id]);

    return (
        <ModelsContext.Provider
            value={{
                allModelos,
                modelo,
                modelos,
                guardarModelo,
                guardarModelos
            }}
        >
            {props.children}
        </ModelsContext.Provider>
    )
}

export default ModelsProvider;

然后是整个存储库的link：https://github.com/patricio1984/desafio-ego

最后部署 link：https://musing-hermann-5129b4.netlify.app/models

提前感谢大家，干杯！

Answer 1

这是 Netlify 的问题，而不是您的应用程序的问题。您需要告诉 Netlify return 您的 index.html 用于所有路径。

https://docs.netlify.com/routing/redirects/

在项目的根目录中创建一个名为 netlify.toml 的新文件并添加以下内容

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

React.js 中出现 useContext 数据加载错误 404 的问题

Problem in React.js with useContext data loading error 404

reactjs

api

react-hooks

fetch

use-context