使用axios将本地json文件加载到redux存储中，但在我使用另一个路由刷新后失败

所以我正在练习React和Redux，我正在像这样将一个本地json文件加载到存储中

import { LOAD_BOOKS } from "./booksConstants";
import axios from "axios";

export const loadBooks = data => {
    return {
        type: LOAD_BOOKS,
        payload: data
    };
};

export const asyncLoadBooks = () => {
    return async dispatch => {
        const response = await axios.get("books.json");
        const data = response.data.books;
        dispatch(loadBooks(data));
    };
};

componentDidMount() {
    try {
        this.props.asyncLoadBooks();
    } catch (error) {
        console.log(error);
    }
}

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000/";

这是减速器

import { LOAD_BOOKS } from "./booksConstants";
import { createReducer } from "../../store/reducerUtil";

const initialState = {
    books: []
};

export const loadBooks = (state, payload) => {
    return {
        ...state,
        books: payload
    };
};

export default createReducer(initialState, {
    [LOAD_BOOKS]: loadBooks
});

我用connect（）将App.js连接到商店，并在componentDidMount（）中启动asyncLoadBooks（），如下所示

import { LOAD_BOOKS } from "./booksConstants";
import axios from "axios";

export const loadBooks = data => {
    return {
        type: LOAD_BOOKS,
        payload: data
    };
};

export const asyncLoadBooks = () => {
    return async dispatch => {
        const response = await axios.get("books.json");
        const data = response.data.books;
        dispatch(loadBooks(data));
    };
};

componentDidMount() {
    try {
        this.props.asyncLoadBooks();
    } catch (error) {
        console.log(error);
    }
}

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000/";

当我在数据上循环并显示它们时，一切都正常，但是，如果我在除“/”之外的任何其他路径上并手动刷新应用程序，则会出现以下错误

加载资源失败：服务器响应状态为404（未找到）

我试图将方法移到构造函数而不是“componentDidMount”，但没有成功

我在这里该怎么办？请记住，我想使用axios和redux来练习它们

编辑 我将一个console.log放入每个async action creator中，显然，当我在home“/”之外的任何路由上时，它会尝试从此路径获取JSON文件，但找不到它http://localhost:3000/category/books.json 404（未找到）

---

我该如何解决这个问题呢？

好吧，伙计们，我想出来了，问题出在

axios

尝试从不同路径获取JSON文件时，当您在不同路径上时，我通过在

index.js

文件中为axios设置全局默认baseURL来解决这个问题，如下所示

import { LOAD_BOOKS } from "./booksConstants";
import axios from "axios";

export const loadBooks = data => {
    return {
        type: LOAD_BOOKS,
        payload: data
    };
};

export const asyncLoadBooks = () => {
    return async dispatch => {
        const response = await axios.get("books.json");
        const data = response.data.books;
        dispatch(loadBooks(data));
    };
};

componentDidMount() {
    try {
        this.props.asyncLoadBooks();
    } catch (error) {
        console.log(error);
    }
}

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000/";

---

现在，您可以在任何路由中刷新，数据将被成功获取。

您使用路由组件吗？我想您需要提供

书籍的相对路径。json

@HenokTesfaye我使用的是，它工作正常，只有在使用“/”@Colin以外的另一个路由进行刷新时，我才尝试使用它，但是它不起作用，我在

/public

文件夹中有

books.json

文件，这是使它起作用的唯一方法，我搜索了它。你能发布显示路由的代码吗？