如何连接两个reactjs页面并显示相同的数据

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Page 1</Link>
            </li>
            <li>
              <Link to="/page2">Page 2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Page1} />
        <Route path="/page2" component={Page2} />
      </div>
    </Router>
  );
}

export default App;

// Page1.js
import React, { useState } from 'react';

function Page1() {
  const [data, setData] = useState('');

  // 获取数据并更新状态
  const fetchData = () => {
    // 这里可以进行数据获取的操作，例如网络请求
    const newData = '这是来自Page1的数据';
    setData(newData);
  };

  return (
    <div>
      <h1>Page 1</h1>
      <button onClick={fetchData}>获取数据</button>
      <p>{data}</p>
    </div>
  );
}

export default Page1;

// Page2.js
import React, { useState } from 'react';

function Page2() {
  const [data, setData] = useState('');

  // 获取数据并更新状态
  const fetchData = () => {
    // 这里可以进行数据获取的操作，例如网络请求
    const newData = '这是来自Page2的数据';
    setData(newData);
  };

  return (
    <div>
      <h1>Page 2</h1>
      <button onClick={fetchData}>获取数据</button>
      <p>{data}</p>
    </div>
  );
}

export default Page2;