redux 类组件路由传参
时间: 2023-11-17 17:05:18 浏览: 87
在 Redux 中,可以通过在组件中使用 `connect` 方法将组件与 Redux store 进行连接,从而实现在组件中获取 store 中的数据和 dispatch action。在类组件中,可以通过 `this.props` 来访问 store 中的数据和 dispatch action。
要在路由中传递参数,可以使用 React Router 提供的 `withRouter` 高阶组件将组件包裹起来,然后通过 `this.props.history.push` 方法进行路由跳转,并在跳转时传递参数。例如:
```jsx
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
const { history } = this.props;
history.push('/path/to/destination', { param: 'value' });
}
render() {
return (
<button onClick={this.handleClick}>Go to destination</button>
);
}
}
export default withRouter(MyComponent);
```
在目标组件中,可以通过 `this.props.location.state` 来获取传递的参数。例如:
```jsx
class DestinationComponent extends React.Component {
render() {
const { param } = this.props.location.state;
return (
<div>{param}</div>
);
}
}
export default DestinationComponent;
```
阅读全文