解决React报错useNavigate() may be used only in context of Router

// index.js
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
// 👇️ wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

// App.js
import React from 'react';
import {
  useNavigate,
} from 'react-router-dom';
export default function App() {
  const navigate = useNavigate();
  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };
  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

// App.test.js
import {render} from '@testing-library/react';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
// 👇️ wrap component that uses useNavigate in Router
test('renders react component', async () => {
  render(
    <Router>
      <App />
    </Router>,
  );
  // your tests...
});

// App.js
import {useNavigate} from 'react-router-dom';
export default function App() {
  const navigate = useNavigate();
  const handleClick = () => {
    // 👇️ replace set to true
    navigate('/about', {replace: true});
  };
  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}