使用 React Router DOM 进行程序化导航

1. 在 React 中使用 React Router DOM 以声明方式导航与以编程方式导航
2. 在 React 中使用 history 对象以编程方式导航

React 以其声明式风格而闻名。当然，方法也起着重要作用。

正是抽象和方法功能的结合使 React 如此强大。

当今最流行的 JavaScript 库使用声明性方法来构建接口。React 很特别，因为它允许你在不直接操作 DOM 的情况下构建 UI。

尽管抽象程度很高，React 仍然为 JSX（用于构建接口的语言）中的 JavaScript 表达式腾出空间。

在 React 中使用 React Router DOM 以声明方式导航与以编程方式导航

React Router 是最流行的用于导航 React 应用程序的库。该库提供了一个 <Link> 组件，它允许开发人员以声明方式创建链接，让你可以无缝导航到特定的 URL。

大多数情况下，你希望在单击链接后更改 URL。但是，有时这种默认行为是不够的，你，程序员，可能需要将用户重定向到另一个 URL。

React Router 还为编程导航打开了大门。开发人员可以通过操作历史堆栈以编程方式导航。

该库遵循客户端路由的概念，允许开发人员绕过浏览器的默认行为并更改 URL，而无需向服务器发送请求。

在 React 中使用 history 对象以编程方式导航

要以编程方式导航 React 应用程序，首先，你必须访问 history 对象。有两种方法可以访问这个对象：从 BrowserRouter 组件作为 prop 接收它，或者使用 .useHistory() 钩子。

历史 对象可以有许多不同的应用。在这种情况下，我们关心它提供的三个方法：push()、pop() 和 replace()。

React 开发人员可以使用这些来以编程方式操作 URL。

.push() 是以编程方式更改 URL 的最常见和最有用的方法。让我们知道如何在不同版本的 React Router 中执行这个操作。

以编程方式更改 React-Router 4.0.0+ 中的 URL

这个版本不包括 useHistory 钩子，所以唯一的选择是通过 props 访问 history 对象。你不能在任何 React 类组件中执行此操作。

该组件必须由 <BrowserRoute>（通常缩写为 <Route>）组件呈现才能访问 history 属性。

让我们看一个例子。

export default class Sample extends Component {
  render() {
    return (
      <Router>
        <Route path="/" component={App}></Route>
      </Router>
    );
  }
}

class App extends Component {
  render() {
    return (
      <button onClick={() => this.props.history.push("samplePath")}>
        Change the URL
      </button>
    );
  }
}

App 组件中有一个元素，一个带有事件监听器的按钮。我们访问 props 中的 history 对象并使用一个参数调用它的 .push() 方法：我们想要导航的路径。

但是，我们组件的 props 对象只包含历史对象，因为 组件会渲染它。

你可以查看演示并单击 codesandbox 上的按钮。

以编程方式更改 React-Router 5.1.0+ 中的 URL

当 react-router 版本 5.1.0 发布时，核心 React 库发生了重大变化。React 16.8 版引入了强大的钩子，为功能组件提供了更多功能。

为了应对这些变化，react-router 5.1.0 版背后的开发人员引入了 useHistory() 挂钩，使功能组件可以轻松访问 history 对象。

让我们看一下这个例子。

export default function Sample(props) {
  return (
    <BrowserRouter>
      <Route>{<App></App>}</Route>
    </BrowserRouter>
  );
}

function App(props) {
  let historyReference = useHistory();
  return (
    <button onClick={() => historyReference.push("boo")}>
      Navigate Programmatically in React Router 5.1.0+
    </button>
  );
}

在这种情况下，父 Sample 组件看起来或多或少与以前相同。它有一个孩子，功能组件 App。

孩子与前面的例子有很大的不同。它是一个功能组件，而不是像以前那样的类组件。而且我们不通过 props 访问 history 对象；相反，我们使用了 useHistory() 钩子。

请注意，如果组件不是自定义的 <Route> 组件子组件，即使使用钩子也无法访问 history 对象。useHistory() 钩子只会改变我们访问 history 对象的方式。

在上面的示例中，我们将钩子返回的 history 对象存储在 historyReference 变量中。然后我们在变量上调用 .push() 方法并提供一个参数来指定路径。

useHistory() 钩子是编写功能组件时访问 history 对象的最简单方法。

如果你更喜欢使用类组件，你仍然可以使用上一节中描述的解决方案，即使你的 react-router 安装版本是 5.1.0 或更高版本。

你可以尝试编辑代码，看看单击演示时会发生什么。

以编程方式更改 React-Router 6.0.0+ 中的 URL

react-router 的最新版本包含一个新的和改进的 useNavigate() 钩子。它返回一个专门用于编程导航的函数。

最新的 React Router 文档 建议使用此钩子以编程方式更改 URL。

function NavigateApp(){
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate("boo")}>
      Navigate Programmatically in React Router 6.1.0+
    </button>
  );
}

它的工作方式与 useHistory() 挂钩大致相同。与 useHistory() 挂钩不同，有一些区别：它返回一个函数，而不是对对象的引用。

我们将函数存储在 navigate 变量中以直接调用它，而不是调用对象的 .push() 方法。它采用与上述方法相同的参数，一个用于指定目标路径的字符串。