如何在App.js中将历史记录传递到BrowserRouter中的导航组件

npm install react-router-dom

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

import React, { useState } from 'react';

function App() {
  const [history, setHistory] = useState([]);

  // 其他组件和逻辑代码

  return (
    <BrowserRouter>
      {/* 导航组件和其他路由相关代码 */}
    </BrowserRouter>
  );
}

export default App;

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

function SomeComponent() {
  const history = useHistory();

  // 更新历史记录的状态
  const updateHistory = () => {
    const newHistory = [...history]; // 创建历史记录的副本
    newHistory.push('some new entry'); // 添加新的历史记录
    setHistory(newHistory); // 更新历史记录的状态
  };

  // 其他组件和逻辑代码
}

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

function Navigation() {
  return (
    <nav>
      <ul>
        {history.map((entry, index) => (
          <li key={index}>
            <Link to={`/history/${index}`}>{entry}</Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}