反应路由器 url 参数 - Javascript

在 React 中，路由器是一种用于管理应用程序 URL 和页面导航的官方库。React 路由器可以通过 URL 更改视图、处理状态和启用地方性导航。

在编写 React 应用时，我们通常需要将 URL 参数传递给组件，这可以通过路由器 URL 参数来实现。

路由器 URL 参数

路由器 URL 参数是在 URL 中传递数据的一种方式。这些参数可以被用来决定展示哪些 React 组件、让页面等等。

在 React 路由器中，URL 参数在 Route 组件中定义，可以通过 props 包含在组件中。Route 组件的 path 属性可以包含 URL 参数，使用冒号来标识。

下面是一个例子：

import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Route exact path="/">
          <h1>主页</h1>
        </Route>
        <Route path="/article/:id">
          <Article />
        </Route>
      </div>
    </Router>
  );
}

在这个例子中，我们可以通过 :id 来传递文章的 ID。现在，我们可以在 Article 组件内部访问该 ID。

function Article(props) {
  const id = props.match.params.id;

  return <h1>文章 {id}</h1>;
}

获取路由器 URL 参数

要获取路由器 URL 参数，我们可以使用 props.match.params。props.match.params 在 Route 组件中可用，返回一个对象，其中包含路由器 URL 参数的键值对。

在上面的例子中，我们可以使用 props.match.params.id 来获取 URL 参数 id 的值。

总结

React 路由器是管理应用程序 URL 和页面导航的官方库。路由器 URL 参数是在 URL 中传递数据的一种方式。在组件内部，我们可以通过 props.match.params 来获取路由器 URL 参数。