在
React中，有
几种方式可以实现页面跳转。其中一种方式是使用
react-router-dom中的
Link组件来实现页面跳转。你可以在按钮或其他组件上使用
Link组件，通过to属性指定目标路径，并可以传递数据作为state属性。例如：
```
import {
Link } from '
react-router-dom';
...
<
Link to={{ pathname: '/path/newpath', state: { data1: {}, data2: [] } }}>
<Button>点击跳转</Button>
</
Link>
```
另一种方式是使用
react-router-redux中的push
方法进行页面跳转。你可以通过dispatch来发送push或replace
方法，其中push
方法可以跳转到指定路径，replace
方法可以替换历史记录中的当前位置。具体使用时可以像下面这样：
```
import { push, replace } from '
react-router-redux';
...
let param1 = {};
dispatch(push("/path/newpath", param1));
dispatch(replace("/path/newpath", param1));
```
还有一种方式是使用RouteComponentProps中的history对象进行页面回退。你可以通过history对象的go、goForward和goBack
方法来向前或向后移动历史记录中的位置。具体使用时可以像下面这样：
```
import { RouteComponentProps } from '
react-router-dom';
interface MyComponentProps extends RouteComponentProps {}
...
const MyComponent:
React.FC<MyComponentProps> = ({ history }) => {
const handleGoBack = () => {
history.goBack();
};
return (
<div>
<button onClick={handleGoBack}>返回</button>
</div>
);
};
```
以上是
React中
几种常见的
路由跳转
方法。你可以根据实际需求选择使用其中的一种方式来实现页面跳转。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [
react路由跳转](https://blog.csdn.net/qq_46503396/article/details/123813712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
本文详细介绍了React中四种常见的路由参数传递方式：params、search、query和state，包括它们的使用方法、优缺点及参数接收方式。重点讨论了参数的传递限制和在不同场景下的适用性，对于理解React路由参数管理具有指导意义。
扫一扫
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
