dvajs怎么实现编程式路由跳转
时间: 2024-03-13 14:45:51 浏览: 107
在 dva 中,你可以通过 `routerRedux` 模块来实现编程式路由跳转。
首先,你需要安装 `react-router-dom` 和 `connected-react-router` 模块。然后在 dva 的 `app.js` 中,你需要先配置 `connected-react-router`,例如:
```javascript
import { createBrowserHistory } from 'history';
import { routerMiddleware, connectRouter } from 'connected-react-router';
const app = dva({
history: createBrowserHistory(),
onAction: routerMiddleware,
onReducer: connectRouter(history),
});
```
在上面的代码中,我们使用 `createBrowserHistory` 创建了一个浏览器的 history 对象,然后将其传递给了 `connected-react-router` 中间件和 reducer。
接下来,在你的组件中,你可以通过 `routerRedux` 中的 `push` 方法来实现编程式路由跳转。例如:
```javascript
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
function MyComponent(props) {
function handleClick() {
props.dispatch(routerRedux.push('/other-page'));
}
return (
<div>
<h1>Hello World!</h1>
<button onClick={handleClick}>Go to other page</button>
</div>
);
}
export default connect()(MyComponent);
```
在上面的代码中,我们通过 `connect` 函数连接了组件与 dva,然后在 `handleClick` 函数中,我们使用 `routerRedux.push` 方法来实现路由跳转。
需要注意的是,你需要在你的路由配置中定义 `/other-page` 路由对应的组件。
阅读全文