迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

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

作者:迹忆客 最近更新:2023/03/07 浏览次数:

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 属性的行为。

默认情况下,只要 URL 的开头遵循为 Route 组件指定的 path,组件就会与 URL 匹配。例如,具有此特定路径的组件将匹配任何 URL。

<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 状态时设置特定样式(例如,当你从菜单查看特定页面时) ,你可以突出显示该菜单项)。

如果你正在构建一个高级应用程序,你无法为每个帖子甚至每个类别定义单独的路由。相反,你将使用称为动态路由的东西。

让我们看一下这个例子。

<Route path="/posts/:id">
    <Post></Post>
</Route>

这个例子指定了一个动态路径,它根据 id 呈现 <Post> 组件。例如,以下链接:example.com/posts/5 将使用 id=5 渲染 <Post> 组件。

但是,如果你需要从子组件访问动态路径的参数怎么办? <Post> 组件可能需要显示其 id

Route 组件获取路径值的一个条件是 Route 组件应该呈现子组件。在上面的示例中,Post 组件作为 children 值传递,因此如果你尝试访问动态参数值,它将不起作用。

相反,你可以使用 rendercomponent 属性直接从 Route 组件渲染组件。让我们看看这两个例子。

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 参数。

或者,你可以使用 Route 组件上的 render 属性来获得相同的结果。它稍微冗长一些,但对于某些人来说可能更容易理解。

<Route exact path="/posts/:id" render={(props) => <Post {...props}></Post>}

这样,你仍然可以访问 props 并从 props.match.params.id 获取 id 值。

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

在这种情况下,使用 componentrender 属性还是在 Route 的开始标签和结束标签之间传递子组件都没有关系。

让我们看一下这个例子。

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>;
}

useParams() 钩子返回一个带有来自 URL 的参数的键值对的对象。我们可以在定义变量并在 JSX 中引用它时对其进行解构。

它看起来更具可读性,但 useParams() 钩子只适用于功能组件。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间:2023/03/15 浏览次数:198 分类:React

React 中在 map() 中使用条件: 在数组上调用 map() 方法。 使用 if 条件,如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

在 React 中调用多个 onClick 函数

发布时间:2023/03/15 浏览次数:160 分类:React

在 React 中调用多个 onClick 函数: 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s

在 React 中按类名查找所有元素

发布时间:2023/03/15 浏览次数:171 分类:React

在 React 中通过 className 查找所有元素: 使用 getElementsByClassName 方法获取具有特定类的所有元素。 将对该方法的调用放在 useEffect() 钩子中。 import {useEffect} from react ; const App = () = { useEf

在 React 中检查元素是否获取到焦点

发布时间:2023/03/15 浏览次数:154 分类:React

要检查元素是否在 React 中获得焦点: 在元素上设置 ref 属性。 元素呈现后,检查元素是否是文档中的活动元素。 如果是,则该元素被聚焦。 import {useEffect, useRef} from react ; export defaul

在 React 中悬停时显示元素或文本

发布时间:2023/03/13 浏览次数:160 分类:React

在 React 中悬停时显示元素或文本: 在元素上设置 onMouseOver 和 onMouseOut 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染另一个元素。 import {useStat

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便