在react脚手架中react router v6 路由表、嵌套路由、编程式路由的使用，react点击按钮跳转页面并传参

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
 
function HomeButton() {
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate('/home')}>
      去到首页
    </button>
  );
}
 
function UserProfile() {
  let navigate = useNavigate();
  return (
    <div>
      <h1>用户个人资料</h1>
      <button onClick={() => navigate(-1)}>返回上一页</button>
    </div>
  );
}
 
function App() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/profile">个人资料</Link>
      <hr />
      <HomeButton />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<UserProfile />} />
      </Routes>
    </div>
  );
}
 
function Home() {
  return <h2>这是首页</h2>;
}
 
export default App;

这个代码示例展示了如何在React应用中使用React Router v6的Link组件进行导航，以及如何使用useNavigate钩子进行编程式导航。同时，它演示了如何使用Routes和Route组件来定义和渲染应用的路由表和嵌套路由。