在React应用中，路由跳转和传参是常见的需求。通过使用
react-router-dom
库，我们可以轻松实现页面间的跳转以及参数传递。本文将详细介绍如何在React应用中实现路由跳转和传参，并提供实例代码供参考。
一、路由跳转
1. 安装插件
首先，确保你的React项目中已经安装了
react-router-dom
。如果没有，可以通过以下命令进行安装：
npm install react-router-dom
2. 路由配置
在React项目中，通常需要在
src
目录下创建一个名为
router
的文件夹，并在其中创建一个
index.js
文件用于配置路由。
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import HomePage from ‘./HomePage’;
import LoginPage from ‘./LoginPage’;

const BasicRouting = () => (






);

export default BasicRouting;
在上面的代码中，我们使用了
BrowserRouter
组件作为整个应用的根路由，
Switch
组件用于渲染与当前路径匹配的
Route
组件。
exact
属性表示只有当路径完全匹配时，对应的组件才会被渲染。
3. 实现跳转
声明式跳转
使用
Link
组件可以实现声明式跳转。以下是一个简单的示例：
import React from ‘react’;
import { Link } from ‘react-router-dom’;

const HomePage = () => (

);

export default HomePage;
在上面的代码中，我们使用
Link
组件创建了一个链接，当点击该链接时，会跳转到
/login
路径对应的
LoginPage
组件。
编程式跳转
使用
useNavigate
钩子可以实现编程式跳转。以下是一个示例：
import React from ‘react’;
import { useNavigate } from ‘react-router-dom’;

const HomePage = () => {
const navigate = useNavigate();

const handleClick = () => {
navigate(‘/login’);
};

return (

);
};

export default HomePage;
在上面的代码中，我们使用
useNavigate
钩子获取了
navigate
函数，并定义了一个
handleClick
函数用于实现跳转。
二、路由传参
1. 通过
params
传参
在路由配置中，可以在路径中添加动态参数，如下所示：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import DetailPage from ‘./DetailPage’;

const BasicRouting = () => (





);

export default BasicRouting;
在上面的代码中，
/detail/:id
表示路径中有名为
id
的动态参数。在
DetailPage
组件中，可以通过
this.props.match.params.id
获取该参数的值。
2. 通过
query
传参
使用
query
传参时，可以在路径中不添加动态参数，如下所示：
import React from ‘react’;
import { useHistory } from ‘react-router-dom’;

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

const handleClick = () => {
history.push(‘/detail?id=123’);
};

return (

);
};

export default HomePage;
在上面的代码中，我们使用
useHistory
钩子获取了
history
对象，并通过
history.push
方法实现跳转，同时传递了
query
参数。
3. 通过
state
传参
使用
state
传参时，可以在路径中不添加动态参数，如下所示：
”`javascript
import React from ‘react’;
import { useHistory } from ‘react-router-dom’;
const HomePage = () => {
const history = useHistory();
const handleClick = () => {
history.push({ pathname: ‘/detail’, state: { id: 123 } });
};
return (