react编程式路由跳转
时间: 2023-09-11 22:04:17 浏览: 54
可以使用React Router库中的history对象进行编程式路由跳转。比如要跳转到路径为'/dashboard'的页面,可以使用以下代码:
```jsx
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function handleClick() {
history.push('/dashboard');
}
return (
<button onClick={handleClick}>
Go to Dashboard
</button>
);
}
```
这样点击按钮后就可以跳转到指定页面。
相关问题
dvajs怎么实现编程式路由跳转
在 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` 路由对应的组件。
react路由跳转
React中的路由跳转可以通过React Router实现。下面是一个简单的例子:
首先,你需要安装React Router:
```
npm install react-router-dom
```
然后,在你的组件中导入`BrowserRouter`和`Link`组件:
```javascript
import { BrowserRouter, Link } from 'react-router-dom';
```
在`BrowserRouter`中定义你的路由规则,例如:
```javascript
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
</Switch>
</div>
</BrowserRouter>
```
其中,`<Link>`组件用于定义路由链接,`to`属性指定链接的目标路由。`<Route>`组件用于匹配路由,并渲染对应的组件。
你可以在组件中使用`useHistory`钩子实现编程式路由跳转,例如:
```javascript
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function handleClick() {
history.push('/new-route');
}
return (
<button onClick={handleClick}>
Go to new route
</button>
);
}
```
这里,我们通过`history.push()`方法实现了路由跳转。