react跳转传参方式

React中跳转页面并传递参数可以使用React Router。以下是基本示例：

1. 在主页中定义路由：

import { Route, BrowserRouter as Router } from 'react-router-dom';
import Home from './Home';
import Detail from './Detail';
 
const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/detail/:id" component={Detail} />
    </div>
  </Router>
);
 
export default App;

1. 在主页中添加链接：

import { Link } from 'react-router-dom';
 
const Home = () => (
  <div>
    <h2>Home</h2>
    <ul>
      <li><Link to="/detail/1">Detail 1</Link></li>
      <li><Link to="/detail/2">Detail 2</Link></li>
      <li><Link to="/detail/3">Detail 3</Link></li>
    </ul>
  </div>
);
 
export default Home;

1. 在详情页中获取参数：

import { useParams } from 'react-router-dom';
 
const Detail = () => {
  let { id } = useParams();
  return (
    <div>
      <h2>Detail {id}</h2>
    </div>
  );
}
 
export default Detail;

此时点击链接会跳转到对应的详情页，并在详情页中显示传递的参数。