如何在没有 Mixins 的情况下以编程方式在 React Router 中导航？

在没有 Mixins 的 React Router 中进行编程导航

React Router 可以在上下文中实现无缝导航，但理解其用法可能会令人困惑。让我们探索如何在不使用 mixins 的情况下以编程方式导航。

React Router 通过上下文提供历史对象，提供对推送和替换方法的访问以进行操作。然而，随着 React 的进步，您有多种编程导航选项：

1。利用 withRouter HOC（不支持 React Router 6）：

withRouter HOC 将历史对象注入到组件 props 中，从而可以直接访问导航方法。

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

const Button = withRouter(({ history }) => {
  const handleClick = () => { history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
});

2.渲染无路径路由（不支持 React Router 6）：

渲染没有路径的 Route 组件，它将始终匹配当前位置并传递历史属性。

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

const Button = () => {
  return (
    <Route render={({ history }) => {
      const handleClick = () => { history.push('/new-location'); };
      return <button onClick={handleClick}>Click Me!</button>;
    }} />
  );
};

3。使用上下文（复杂且已弃用）：

此方法需要深入了解 React 的上下文，应谨慎使用。您需要定义一个组件上下文类型来访问历史记录属性。

import React from 'react';

const Button = (props, context) => {
  const handleClick = () => { context.history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
};

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

对于大多数场景，选项 1 和 2 很简单，建议使用。

以上是如何在没有 Mixins 的情况下以编程方式在 React Router 中导航？的详细内容。更多信息请关注PHP中文网其他相关文章！