React是一個用於構建用戶界面的JavaScript庫。我們還可以藉助React Router將其擴展為構建多頁應用程序。這是一個第三方庫，可在我們的React應用程序中啟用路由。

在本教程中，我們將介紹使用React Router入門所需的一切。

初始化項目

為了能夠繼續學習，您需要通過在終端中運行以下命令來創建一個新的react應用程序：

<code>npx create-react-app react-router-guide/<code>

然後，將這些代碼行添加到App.js文件中。

在App.js中，

<code>import React from "react";import "./index.css"export default function App() {  return (    <main>           /<main>  );}// Home Pageconst Home = () => (  <>    
Home
    <faketext>  >);// About Pageconst About = () => (  <>    
About
    <faketext>  >);// Contact Pageconst Contact = () => (  <>    
Contact
    <faketext>  >);const FakeText = () => (  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
)/<code>

然後，在繼續之前，我們先回答一個重要問題：什麼是路由？

什麼是路由？

路由是向用戶顯示不同頁面的能力。這意味著它可以通過輸入URL或單擊元素在應用程序的不同部分之間移動。

如您所知，默認情況下，React不帶路由。為了在我們的項目中啟用它，我們需要添加一個名為react-router的庫。

要安裝它，您將必須在終端中運行以下命令：

<code>yarn add react-router-domornpm install react-router-dom/<code>

現在，我們已經成功安裝了react router，讓我們在下一部分開始使用它。

設置路由

要在React應用中啟用路由，我們首先需要從react-router-dom導入BrowserRouter。

App.js

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router } from "react-router-dom";export default function App() {  return (    <router>      <main>              /<main>    /<router>  );}/<code>

它會將需要路由的所有內容保存在我們的應用程序中。這意味著，如果需要在整個應用程序中進行路由，則必須使用BrowserRouter包裝更高層的組件。

順便說一句，您不必像我在這裡那樣將BrowserRouter重命名為Router，我只是想保持可讀性。

只有router，還做不了很多事情，讓我們在下一節中添加一條路由。

渲染路由

要渲染路由，我們必須從react-router-dom包中導入Route組件。

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route } from "react-router-dom";export default function App() {  return (    <router>      <main>                <route> 
Welcome!
} />      /<route>/<main>    /<router>  );}/<code>

然後，將其添加到我們要呈現內容的位置。路線組件具有多個屬性。但是在這裡，我們只需要路徑和渲染。

• path：這是route的路徑。在這裡，我們使用 / 定義主頁的路徑。
• render：到達路由時將顯示內容。在這裡，我們將向用戶呈現歡迎消息。

在某些情況下，提供這樣的路由是完全可以的，但請想象一下，當我們需要處理真實​​組件時，使用render可能不是正確的解決方案。

那麼，我們該如何顯示一個真實的組件呢？好吧，Route組件還有另一個名為component的屬性。

讓我們對示例進行一些更新以瞭解其實際效果。

App.js

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route } from "react-router-dom";export default function App() {  return (     <router>      <main>                <route>      /<main>    /<router>  );}const Home = () => (  <>    
Home
    <faketext>  >);/<code>

現在，我們的路由將不再加載消息，而是加載Home組件。

為了獲得React Router的全部功能，我們需要有多個頁面和鏈接可以使用。我們已經有了頁面（如果需要，也可以使用組件），現在，讓我們添加一些鏈接以能夠在頁面之間進行切換。

使用鏈接切換頁面

要添加到我們項目的鏈接，我們將再次使用React Router。

App.js

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route, Link } from "react-router-dom";export default function App() {  return (    <router>      <main>                <route>        <route>        <route>      /<main>    /<router>  );}const Home = () => (  <>    
Home
    <faketext>  >);const About = () => (  <>    
About
    <faketext>  >);const Contact = () => (  <>    
Contact
    <faketext>  >);/<code>

導入鏈接後，我們必須稍微更新導航欄。

現在，React Router不再使用標籤和href，而是使用Link來進行切換，而無需重新加載頁面。

然後，我們需要添加兩條新路線：“關於”和“聯繫方式”，以便您也可以在頁面或組件之間進行切換。

現在，我們可以通過鏈接轉到應用程序的不同部分。但是，我們的路由器存在問題。即使我們切換到其他頁面，Home組件也會一直顯示。

原因是React Router將檢查定義的路徑是否以/開頭（如果是），它將呈現組件。

在這裡，我們的第一個路徑以/開頭，因此Home組件每次都會呈現。

但是，我們仍然可以通過將exact屬性添加到R​​oute來更改默認行為。

App.js

<code><route>/<code>

現在，對home組件的路由添加了exact屬性，那麼只有與完整路徑匹配時才會呈現。

我們仍然可以通過用Switch包裝路由來告訴React Router一次只加載一條路由來增強它。

App.js

<code>import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";  <switch>    <route>    <route>    <route>  /<switch>/<code>

現在，我們有了新的鏈接，讓我們使用它們來傳遞參數。

傳遞路由參數

要在頁面之間傳遞數據，我們需要更新示例。

App.js

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";export default function App() {  const name = 'John Doe'  return (    <router>      <main>              <switch>        <route>        <route>        <route>      /<switch>      /<main>    /<router>  );}const Home = () => (  <>    
Home
    <faketext>  >);const About = ({ match: { params: { name } } }) => (  // props.match.params.name  <>    
About {name}
    <faketext>  >);const Contact = () => (  <>    
Contact
    <faketext>  >);/<code>

如您在此處看到的，我們首先聲明一個新的常量名稱，該常量名稱將作為參數傳遞給About頁面。並且，我們將名稱附加到相應的鏈接。

這樣，我們現在必須通過調整其路徑以將名稱接收為參數path =“ / about /：name”來更新About路線。

現在，參數將作為About組件中的props接收，我們現在唯一要做的就是對props進行結構分解並獲取name屬性。順便說一下，{match：{params：{name}}}與props.match.params.name相同。

到目前為止，我們已經做了很多工作，但是，在某些情況下，我們不想使用鏈接在頁面之間導航。

有時，我們必須等待操作完成才能導航到下一頁。

讓我們在下一部分中處理這種情況。

以編程方式導航

我們收到的props有一些便捷的方法可用於在頁面之間導航。

App.js

<code>const Contact = ({history}) => (  <>    
Contact
    <button> history.push('/') } >Go to home/<button>    <faketext>  >);/<code>

在這裡，我們從收到的props中提取history對象。它有一些方便的方法，例如goBack，goForward等。但是在這裡，我們將使用push方法來轉到主頁。

現在，讓我們處理重定向用戶的情況。

重定向到另一個頁面

React Router還有另一個名為Redirect的組件，正如您猜到的，它可以幫助我們將用戶重定向到另一個頁面。

<code>import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";const About = ({ match:{ params: { name } } }) => (  // props.match.params.name  <>    { name !== 'Foo' ? <redirect> : null }    
About {name}
    <faketext>  >);/<code>

現在，如果作為參數傳遞的名稱不等於Foo，則用戶將被重定向到主頁。

您可能會爭論為什麼我不使用props.history.push('/')重定向用戶？好吧，Redirect組件會替換頁面，因此用戶無法返回上一頁，但是使用push方法，它可以。同樣，您還可以使用props.history.replace('/')來模仿重定向行為。

現在，讓我們繼續處理用戶遇到不存在的路由時的情況。

重定向到404頁面

要將用戶重定向到404頁面，您可以創建一個組件來顯示它，但是為了使事情簡單起見，我將僅顯示帶有render的消息。

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";export default function App() {  const name = 'Foo'  return (    <router>      <main>              <switch>        <route>        <route>        <route>        <route> 
404: page not found
} />      /<route>/<switch>      /<main>    /<router>  );}/<code>

我們添加的新路由將捕獲所有不存在的路徑，並將用戶重定向到404頁面。

現在，讓我們繼續前進，並在下一部分中學習如何保護我們的路由。

保護路由

有很多方法可以保護通往React的路由。但是，在這裡，我僅檢查用戶是否已通過身份驗證並將其重定向到適當的頁面。

<code>import React, { Fragment } from "react";import "./index.css"import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";export default function App() {  const name = 'Foo'  const isAuthenticated = false  return (    <router>      <main>                <switch>          <route>          {            isAuthenticated ?               <>                <route>                <route>              >             : <redirect>          }        /<switch>      /<main>    /<router>  );}/<code>

如您所見，我聲明瞭一個模仿身份驗證的變量。然後，檢查用戶是否已通過身份驗證。如果是這種情況，請渲染受保護的頁面，否則將其重定向到主頁。

到目前為止，我們已經介紹了很多內容，但是它仍然是一個有趣的部分：路由鉤子Hooks。

讓我們進入最後一節，介紹Hooks。

路由hooks（useHistory，useParams，useLocation）

路由hooks使事情變得容易得多。現在，以簡單而優雅的方式訪問歷史記錄，位置或參數。

useHistory

useHistory鉤子使我們可以訪問history對象，而無需從props中將其提取。

<code>import { useHistory } from "react-router-dom";const Contact = () => {  const { history } = useHistory();  return (    <>      
Contact
      <button> history.push('/') } >Go to home/<button>    >  )};/<code>

useParams

它可以幫助我們無需使用props對象就可以在URL上傳遞參數。

<code>import { BrowserRouter as Router, Route, Link, Switch, useParams } from "react-router-dom";export default function App() {  const name = 'Foo'    return (    <router>      <main>              <switch>        <route>        <route>      /<switch>      /<main>    /<router>  );}const About = () => {  const { name } = useParams()    return (    // props.match.params.name    <>      { name !== 'Foo' ? <redirect> : null }      
About {name}
      <route>    >  )};/<code>

useLocation

它返回代表當前URL的位置對象。

<code>import { useLocation } from "react-router-dom";const Contact = () => {  const { pathname } = useLocation();  return (    <>      
Contact
      
當前 URL: {pathname}
    >  )};/<code>

最後

React Router是一個了不起的庫，它可以幫助我們從一個頁面轉到一個多頁面的應用程序（雖然它仍然是一個頁面），並且具有很高的可用性。現在，藉助路由hooks，您已經親眼目睹了它們的簡易性和優雅性，絕對是您下一個項目中需要考慮使用的。

閱讀更多 前端知否 的文章

關鍵字: 路由 JavaScript Sed