通过React Router从json传递数据

// 定义数据的JSON文件（data.json）
{
  "users": [
    {
      "id": 1,
      "name": "John"
    },
    {
      "id": 2,
      "name": "Jane"
    }
  ]
}

// App.js
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 通过fetch或其他方式获取JSON数据
    fetch('data.json')
      .then(response => response.json())
      .then(data => {
        // 根据参数id获取对应的用户数据
        const user = data.users.find(user => user.id === parseInt(id));
        setUser(user);
      });
  }, [id]);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>User Details</h2>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <div>
        <h1>React Router Example</h1>
        <ul>
          <li>
            <Link to="/user/1">User 1</Link>
          </li>
          <li>
            <Link to="/user/2">User 2</Link>
          </li>
        </ul>

        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
};

export default App;