在ReactJs中完成函数后更改路由

npm install react-router-dom

yarn add react-router-dom

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

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

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

const MyComponent = () => {
  const history = useHistory();

  const handleButtonClick = () => {
    // 执行函数后更改路由
    // 假设要跳转到/about路径
    history.push('/about');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>跳转到About页面</button>
    </div>
  );
};

export default MyComponent;