您需要在入口点.js/.tsx文件中添加BrowserRouter。
如果使用的是npx create-react-app .，则在index.js中导入BrowserRouter

import { BrowserRouter } from "react-router-dom";
.
. // Other Imports..
.

<React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>

字符串
在App组件中，您需要使用<Routes>和<Route>。
All Set！

将history作为prop传递给Navigation组件您可以将history对象作为prop从react-router-dom传递给Navigation组件。这样，您就可以在Navigation组件中使用Link组件和useLocation钩子，而不需要用另一个BrowserRouter Package 它。下面是一个例子：

import React from 'react';
import { Link, useLocation } from 'react-router-dom';

const Navigation = ({ history }) => {
  const location = useLocation();

  // You can use the `Link` component and `useLocation` hook here.

  return (
    <nav>
      <ul>
        <li>
          <Link to="/home">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        {/* Additional navigation items */}
      </ul>
    </nav>
  );
};

export default Navigation;

字符串
在使用Navigation组件的主项目中，确保使用BrowserRouter Package 了整个应用程序（App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Navigation from './Navigation';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <BrowserRouter>
      <Navigation />
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
      {/* Additional routes */}
    </BrowserRouter>
  );
};

export default App;

型