使用非受控组件更新路由

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

// 定义路由
const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
);

// 创建非受控组件
const Contact = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    // 更新路由
    history.push('/about');
  };

  return (
    <div>
      <h2>Contact</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Name" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

// 获取路由参数
const About = withRouter(({ history }) => {
  const handleClick = () => {
    // 更新路由
    history.push('/contact');
  };

  return (
    <div>
      <h2>About</h2>
      <button onClick={handleClick}>Go to Contact</button>
    </div>
  );
});

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

export default App;