从 React 中的子组件访问路由参数
React 是一个 JavaScript 库,可让你为 Web 应用程序构建漂亮的用户界面。与其他框架不同,它没有内置路由功能,因此 React 开发人员需要使用外部库。
React 最流行的路由库是 react-router
,其中包括许多对导航、路由匹配和其他基本路由实用程序必不可少的自定义组件。
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
状态时设置特定样式(例如,当你从菜单查看特定页面时) ,你可以突出显示该菜单项)。
在 React 中如何访问子组件的参数
如果你正在构建一个高级应用程序,你无法为每个帖子甚至每个类别定义单独的路由。相反,你将使用称为动态路由的东西。
让我们看一下这个例子。
<Route path="/posts/:id">
<Post></Post>
</Route>
这个例子指定了一个动态路径,它根据 id
呈现 <Post>
组件。例如,以下链接:example.com/posts/5
将使用 id=5
渲染 <Post>
组件。
但是,如果你需要从子组件访问动态路径的参数怎么办? <Post>
组件可能需要显示其 id
。
从 Route
组件获取路径值的一个条件是 Route
组件应该呈现子组件。在上面的示例中,Post
组件作为 children
值传递,因此如果你尝试访问动态参数值,它将不起作用。
相反,你可以使用 render
或 component
属性直接从 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
参数。
查看 CodeSandbox 演示以更好地理解。
或者,你可以使用 Route
组件上的 render
属性来获得相同的结果。它稍微冗长一些,但对于某些人来说可能更容易理解。
<Route exact path="/posts/:id" render={(props) => <Post {...props}></Post>}
这样,你仍然可以访问 props
并从 props.match.params.id
获取 id
值。
在 React 中使用 useParams()
钩子获取参数
自 react-router
版本 5.1 发布以来,该软件包还包含一个有用的 useParams()
挂钩,允许开发人员轻松地从 URL 访问参数。
在这种情况下,使用 component
或 render
属性还是在 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()
钩子只适用于功能组件。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn