12. React 中的子组件访问路由参数

React 是一个 JavaScript 库，可让你为 Web 应用程序构建漂亮的用户界面。与其他框架不同，它没有内置路由功能，因此 React 开发人员需要使用外部库。

React 最流行的路由库是 react-router，其中包括许多对导航、路由匹配和其他基本路由实用程序必不可少的自定义组件。

React Router 遵循核心 React 库的基于组件的方法。react-router 包中包含的所有组件都可以分为三大类：路由、路由匹配器和导航器组件。

此类别中的组件是使其他一切正常工作所必需的。例如，在构建 Web 应用程序时，你最有可能使用 react-router-dom 库中的 BrowserRouter 组件。

要在你的应用程序中执行路由匹配和导航，首先，你必须用 BrowserRouter 组件包装它。BrowserRouter 通常是构建 Web 应用程序所需要的，但它不是该类别中唯一的组件。

查看官方文档页面了解更多信息

两个自定义组件，特别是 <Switch> 和 <Route>，属于路由匹配器。React 开发者结合使用这两者来根据当前的 URL 来确定需要渲染哪个组件。

<Switch> 有多个具有不同路径的 <Route> 组件作为其子组件。当 Switch 组件找到具有与当前 URL 匹配的路径属性的 <Route> 时，它将呈现相应的组件并忽略所有其他 <Route> 组件。

<Route> 组件接受 path 属性，你可以在其中指定应呈现特定组件的 URL 结构。然而，理解 exact 属性的使用也很重要。它是一个布尔属性，因此你不需要设置值

 <Route path="/" component={Home}></Route>

如果我们设置 exact 属性，如下例所示，此 <Route> 组件将尝试匹配整个 URL，而不仅仅是开头。因此，只有当 URL 为 example.com/ 时，Home 组件才会呈现。

react-router 包还包括用于更改 URL 的组件。 <Link> 和 <NavLink> 是最受欢迎的。

<Link> 是常规 HTML 中常规 <a> 链接元素的略微修改版本。它专为单页应用程序库和框架而设计。

使用 <Link> 组件更改 URL 不会重新加载页面，但会在必要时更改视图。

<NavLink> 组件实际上与 <Link> 相同，但它允许你在它处于 active 状态时设置特定样式（例如，当你从菜单查看特定页面时） ，你可以突出显示该菜单项）

export default function App() {
  return (
    <BrowserRouter>
      <Route exact path="/posts/:id" component={Post}></Route>
    </BrowserRouter>
  );
}
function Post(props) {
  return <h2>ID is {props.match.params.id}</h2>;
}

在这种情况下，我们使用 component 属性并将其设置为当 URL 与路径匹配时要显示的组件。

当这样渲染时，子 Post 组件仍然可以访问 Route 组件中的 props，包括 URL 中的动态 id 参数。

import {useParams} from "react-router-dom"
export default function App() {
  return (
    <BrowserRouter>
      <Route exact path="/posts/:id">
          <Post></Post>
       </Route>
    </BrowserRouter>
  );
}
function Post(props) {
  let {id} = useParams()
  return <h2>ID is {id}</h2>;
}

react-router 版本 5.1 发布以来，该软件包还包含一个有用的 useParams() 挂钩，允许开发人员轻松地从 URL 访问参数

useParams() 钩子返回一个带有来自 URL 的参数的键值对的对象。我们可以在定义变量并在 JSX 中引用它时对其进行解构。更具可读性，但 useParams() 钩子只适用于功能组件。