react编程式路由跳转

可以使用React Router库中的history对象进行编程式路由跳转。比如要跳转到路径为'/dashboard'的页面，可以使用以下代码：

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`，例如：

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` 方法来实现编程式路由跳转。例如：

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 中，可以使用 Link 组件或者编程式导航实现路由跳转。

如果想在路由跳转的时候不刷新组件，可以使用 React Router 中的 `push` 和 `replace` 方法进行编程式导航。

例如，使用 `push` 方法跳转路由时，可以在目标路由组件中接收到新的 props，但是不会重新渲染整个组件树。

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/new-route');
  };

  return (
    <button onClick={handleClick}>Go to new route</button>
  );
}

在上面的例子中，当用户点击按钮时，调用 `handleClick` 方法，使用 `history.push` 方法进行路由跳转。这样会加载新的路由组件，但不会刷新整个组件树。