react history跳转页面携带对象
时间: 2023-08-15 11:08:38 浏览: 102
在React中使用`history`对象进行页面跳转时,可以将参数作为state传递。具体方法如下:
1. 在跳转时将参数作为state传递给`history.push()`方法:
```
history.push({
pathname: '/your-path',
state: { yourObject: yourValue }
})
```
2. 在接收页面从`location.state`获取参数:
```
const { yourObject } = props.location.state;
```
需要注意的是,`location.state`在浏览器刷新时会被清空,因此如果需要在刷新后仍然可以获取到传递的参数,可以考虑使用URL参数或者其他存储方案。
相关问题
react路由跳转携带参数
在React路由中,可以使用React Router提供的withRouter高阶组件或者Hook来获取当前路由的参数。
使用withRouter:
```javascript
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
const { history } = this.props;
history.push(`/path/${paramValue}`);
}
render() {
return (
<button onClick={this.handleClick}>跳转</button>
);
}
}
export default withRouter(MyComponent);
```
使用Hook:
```javascript
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push(`/path/${paramValue}`);
}
return (
<button onClick={handleClick}>跳转</button>
);
}
export default MyComponent;
```
在路由配置中,可以使用动态路由来获取参数:
```javascript
<Route path="/path/:paramValue" component={MyComponent} />
```
在MyComponent组件中,可以使用props.match.params.paramValue来获取参数值。例如:
```javascript
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
const { history, match } = this.props;
history.push(`/path/${match.params.paramValue}`);
}
render() {
const { match } = this.props;
const paramValue = match.params.paramValue;
return (
<div>{paramValue}</div>
);
}
}
export default withRouter(MyComponent);
```
reacrt用函数组件页面如何进行页面跳转的同时携带对象数据,并在被跳转页面获取数据
在 React 中使用函数组件实现页面跳转并携带对象数据,可以使用 `useHistory` 钩子和 React Router。
首先,确保已经安装了 `react-router-dom` 包。
1. 在你的函数组件中,导入 `useHistory` 和 `Link`。
```jsx
import { useHistory, Link } from "react-router-dom";
```
2. 在函数组件中,使用 `useHistory` 钩子获取路由历史记录。
```jsx
const history = useHistory();
```
3. 在页面跳转时,使用 `history.push` 方法进行跳转,并通过第二个参数传递携带的数据。
```jsx
history.push("/target", { data: { foo: "bar" } });
```
4. 在被跳转的页面中,可以通过 `props.location.state` 获取传递的数据。
```jsx
const TargetComponent = (props) => {
const { data } = props.location.state;
return (
<div>
<h1>Target Component</h1>
<p>Data: {JSON.stringify(data)}</p>
</div>
);
};
```
完整的示例代码如下:
```jsx
import React from "react";
import { useHistory, Link, BrowserRouter as Router, Route } from "react-router-dom";
const App = () => {
const history = useHistory();
const handleRedirect = () => {
history.push("/target", { data: { foo: "bar" } });
};
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<button onClick={handleRedirect}>Go to Target Component</button>
</li>
</ul>
</nav>
<Route path="/target" component={TargetComponent} />
</div>
</Router>
);
};
const TargetComponent = (props) => {
const { data } = props.location.state;
return (
<div>
<h1>Target Component</h1>
<p>Data: {JSON.stringify(data)}</p>
</div>
);
};
export default App;
```
在上面的示例中,我们使用 `useHistory` 钩子获取路由历史记录,并在点击按钮时通过 `history.push` 进行页面跳转,并携带了对象数据。在 `TargetComponent` 组件中,我们通过 `props.location.state` 获取到携带的数据,并进行展示。
阅读全文