從 React 中的子元件訪問路由引數

1. React Router 中的基本元件及其屬性
2. 在 React 中如何訪問子元件的引數
3. 在 React 中使用 useParams() 鉤子獲取引數

React 是一個 JavaScript 庫，可讓你為 Web 應用程式構建漂亮的使用者介面。與其他框架不同，它沒有內建路由功能，因此 React 開發人員需要使用外部庫。

React 最流行的路由庫是 react-router，其中包括許多對導航、路由匹配和其他基本路由實用程式必不可少的自定義元件。

React Router 中的基本元件及其屬性

React Router 遵循核心 React 庫的基於元件的方法。react-router 包中包含的所有元件都可以分為三大類：路由、路由匹配器和導航器元件。

1. 路由

此類別中的元件是使其他一切正常工作所必需的。例如，在構建 Web 應用程式時，你最有可能使用 react-router-dom 庫中的 BrowserRouter 元件。

要在你的應用程式中執行路由匹配和導航，首先，你必須用 BrowserRouter 元件包裝它。BrowserRouter 通常是構建 Web 應用程式所需要的，但它不是該類別中唯一的元件。

檢視官方文件頁面瞭解更多資訊。

2. 路由匹配器元件

兩個自定義元件，特別是 <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 元件才會呈現。

3. 導航元件

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() 鉤子只適用於功能元件。