React入门问题：点击View按钮无法显示数据且路由异常求助

一、路由问题修复 #

存在的问题 #

1. 导航链接路径重复：Home和View的to属性都设为"/"，点击View链接无法切换路由
2. 路由规则冲突：两个Route的path均为"/"，React Router会优先匹配第一个，导致View组件永远无法渲染
3. 缺失必要导入：Menulink组件未导入路由相关组件及页面组件

修正后的Menulink.js #

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import { Home } from './Home';
import { View } from './View';

export function Menulink() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/view">View</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/view" element={<View />} />
      </Routes>
    </BrowserRouter>
  );
}

二、View组件数据显示问题修复 #

存在的问题 #

1. 空数组判断错误：初始state为[]，!data在JS中返回false（空数组属于真值），导致"No data found"永远不会显示
2. 列表结构不合法：<ul>直接嵌套<div>不符合HTML规范，会导致渲染异常
3. 缺失key属性：React列表渲染未添加唯一key，既会触发警告也可能影响渲染稳定性
4. 未处理请求错误：缺少fetch请求的错误捕获逻辑

修正后的View.js #

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

export function View(){
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/data.json")
      .then((res) => res.json())
      .then((responseData) => {
        console.log(`data : ${JSON.stringify(responseData)}`);
        if (Array.isArray(responseData)) {
          setData(responseData);
        } else {
          // 若返回非数组结构，可根据实际数据格式调整转换逻辑
          setData([]);
        }
      })
      .catch(err => console.error("数据获取失败:", err));
  }, []);

  return (
    <div>
      <h2>Data from JSON:</h2>
      <ul>
        {data.length === 0 ? (
          <li>No data found</li>
        ) : (
          data.map(d => (
            <li key={d.id}>
              <p>Id:{d.id}</p>
              <p>Name:{d.name}</p>
              <p>description:{d.description}</p>
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

额外注意事项 #

• 确保data.json放在项目的public目录下（React项目中，public目录下的文件可通过根路径直接访问）
• 检查data.json格式是否正确，示例格式如下：

[
  {"id": 1, "name": "示例1", "description": "描述1"},
  {"id": 2, "name": "示例2", "description": "描述2"}
]

• 若未安装react-router-dom，执行命令安装：npm install react-router-dom 或 yarn add react-router-dom

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