如何使用功能组件导航到其他组件

npm install react-router-dom

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

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

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

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

export default Home;

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

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />