react 路由跳转方法
时间: 2023-12-05 07:06:30 浏览: 46
在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 ]