在reactjs中从主页中的链接(数组索引)打开新页面中的数据

npm install react-router-dom

yarn add react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const HomePage = () => {
  const data = [
    { id: 1, title: '数据1' },
    { id: 2, title: '数据2' },
    { id: 3, title: '数据3' },
  ];

  return (
    <div>
      <h1>主页</h1>
      <ul>
        {data.map((item, index) => (
          <li key={item.id}>
            <Link to={`/data/${index}`}>{item.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

const DataPage = ({ match }) => {
  const data = [
    { id: 1, title: '数据1', content: '这是数据1的内容' },
    { id: 2, title: '数据2', content: '这是数据2的内容' },
    { id: 3, title: '数据3', content: '这是数据3的内容' },
  ];

  const dataIndex = parseInt(match.params.index, 10);
  const selectedData = data[dataIndex];

  return (
    <div>
      <h1>{selectedData.title}</h1>
      <p>{selectedData.content}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={HomePage} />
        <Route path="/data/:index" component={DataPage} />
      </div>
    </Router>
  );
};

export default App;