React导航将参数传递到堆栈

// 定义路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Link to="/user/123">Go to User 123</Link>
        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
}

// 获取路径参数
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

// 通过编程方式进行页面跳转并传递状态
import { useHistory } from 'react-router-dom';

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

  const handleClick = () => {
    history.push('/about', { message: 'Hello from Home!' });
  };

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

// 获取状态
import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();
  const { message } = location.state || {};

  return <h1>About Page - {message}</h1>;
}