到達路由器教程

在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>

免費下載我的反應手冊


更多反應教程: