到達路由器教程

在React應用中使用Reach Router的快速入門

在上一個項目中，我使用了到達路由器我認為這是在React應用程序中進行路由的最簡單方法。

我認為比這容易得多反應路由器，這是我過去使用的另一台路由器。

這是一個5分鐘的教程，以了解其基礎知識。

安裝

首先，使用安裝

npm install @reach/router

如果@語法對您來說是新的，它是一個npm功能，允許有作用域的程序包。換句話說，一個名稱空間。

接下來，將其導入您的項目中。

import { Router } from '@reach/router'

基本用法

我在頂級React文件中使用它，index.js在一個創建反應應用安裝，包裝要顯示的所有組件：

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

這path我添加到組件的屬性允許我為它們設置路徑。

換句話說，當我在瀏覽器URL欄中鍵入該路徑時，“到達路由器”會向我顯示該特定組件。

這/path是索引路由，當您未在應用程序域旁邊設置URL /路徑時顯示。換句話說，就是“主頁”。

默認路線

當用戶訪問與任何路由都不匹配的URL時，默認情況下，“到達路由器”會將其重定向到/路線。您可以添加一個default路由以處理這種情況並顯示一條不錯的“ 404”消息：

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

以編程方式更改路線

使用navigate功能以編程方式更改您應用中的路線：

import { navigate } from '@reach/router'

navigate('/private-area')

使用Link組件以使用JSX鏈接到您的路線：

import { Link } from '@reach/router'

<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

網址參數

使用添加參數:param句法：

<Router>
  <User path="users/:userId" />
</Router>

現在，在這個假設的用戶組件中，我們可以userId作為道具：

const User = ({ userId }) => (
  <p>User {userId}</p>
)

嵌套路線

我向您展示瞭如何在頂級React文件中以這種方式定義路由：

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

您可以定義嵌套路線：

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

所以現在您可以擁有/private-area/23232鏈接指向用戶組件，並傳遞userId 23232。

您還可以選擇允許組件在其中定義其自己的路線。您使用/*路由後的通配符：

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

然後，您可以在組件內部再次導入Router，並定義其自己的子路由集：

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

任何路線使用/private-area/something將由User組件處理，路線之後的部分將作為其組件發送userId支柱。

為了顯示一些東西/private-area現在，您還需要添加一個/中的處理程序PrivateArea成分：

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

免費下載我的反應手冊


更多反應教程：


在線技術維基！