React中如何通过URL中的作者名从JSON文件获取对应博客数据？

首先明确：可以通过作者名/标题筛选获取数据，你遇到的404错误是因为直接用作者名作为路径请求（比如/blogs/john），但JSON Server默认仅支持按ID匹配单条数据，不支持直接通过字段值作为路径筛选。以下是具体解决步骤：

1. 调整请求URL（JSON Server筛选语法） #

JSON Server支持通过查询参数实现字段筛选，正确的请求格式如下：

// 假设你的自定义useFetch接收URL参数
const { data, loading, error } = useFetch(`/blogs?author=john`);

该请求会返回所有author字段等于john的博客数据。如果需要模糊匹配（比如作者名包含指定关键词），可以使用_like参数：

// 匹配作者名包含"jo"的所有博客
useFetch(`/blogs?author_like=jo`);

2. 从URL参数中提取作者名 #

如果作者名来自页面URL的参数（比如路径为/author/john或/?author=john），需要先解析URL参数：

• 若使用React Router v6：

import { useParams } from 'react-router-dom';

function AuthorBlogs() {
  const { authorName } = useParams(); // 对应路由定义：/author/:authorName
  const { data, loading, error } = useFetch(`/blogs?author=${authorName}`);
  
  // 后续数据渲染逻辑...
}

• 若未使用React Router，直接解析window.location：

const params = new URLSearchParams(window.location.search);
const authorName = params.get('author');
const { data, loading, error } = useFetch(`/blogs?author=${authorName}`);

3. 自定义useFetch Hook的注意事项 #

确保你的useFetch Hook能正确处理GET请求的查询参数，避免错误编码URL。同时在Hook的错误处理逻辑中，可针对404状态提示“该作者暂无博客”，提升用户体验。

4. 先测试基础请求 #

先在浏览器地址栏直接访问http://localhost:3000/blogs?author=john（假设JSON Server运行在3000端口），确认能返回正确数据后再集成到React组件中，可快速排除Hook本身的问题。

内容的提问来源于stack exchange，提问作者Haroon Zaqoota