ReactJS - 路由

---

---

在 Web 應用中，路由是將 Web URL 繫結到 Web 應用中特定資源的過程。在 React 中，它是將 URL 繫結到元件。React 本身並不支援路由，因為它本質上是一個使用者介面庫。React 社群提供了許多第三方元件來處理 React 應用中的路由。讓我們學習 React Router，它是 React 應用的首選 路由庫。

安裝 React Router

讓我們學習如何在我們的 Expense Manager 應用中安裝 React Router 元件。

開啟命令提示符並轉到應用的根資料夾。

cd /go/to/expense/manager

使用以下命令安裝 react router。

npm install react-router-dom --save

React Router

React Router 提供了四個元件來管理 React 應用中的導航。

Router − Router 是頂級元件。它包含整個應用。

Link − 類似於 html 中的錨標記。它設定目標 url 以及參考文字。

<Link to="/">Home</Link>

這裡，to 屬性用於設定目標 url。

Route − 將目標 url 對映到元件。

巢狀路由

React Router 也支援巢狀路由。讓我們使用以下示例來理解巢狀路由以建立一個應用 −

Home.jsx

import React from "react";
function Home() {
  return (
    <div className="Home">
      <h1>This is Home</h1>
    </div>
  );
}
export default Home;

About.jsx

import React from "react";
function About() {
  return (
    <div className="About">
      <h1>AboutUs</h1>
      <p>tutorialspoint India</p>
    </div>
  );
}
export default About;

Contact.jsx

import React from "react";
function Contact() {
  return (
    <div className="Contact">
      <h1>Contact-Us</h1>
      <p>
        Tutorials Point India Private Limited, 4th Floor, Incor9 Building, Plot
        No: 283/A, Kavuri Hills, Madhapur, Hyderabad, Telangana, INDIA-500081
      </p>
    </div>
  );
}
export default Contact;

建立導航

讓我們在上面建立的元件之間引入導航。應用的最小螢幕如下所示 −

• 首頁 − 應用的登入或初始螢幕

• 關於 − 顯示應用的描述

• 聯絡 − 包含聯絡資訊

以下 Navigate.jsx 檔案的完整程式碼將包含從一個元件到另一個元件的連結。它將從登入頁面建立到其他元件的連結。

Navigate.jsx

import React from "react";
import { Outlet, Link } from "react-router-dom";

function Navigate() {
  return (
    <div>
      <ul style={{ listStyle: "none" }}>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About-Us</Link>
        </li>
        <li>
          <Link to="/contact">Contact-Us</Link>
        </li>
      </ul>

      <Outlet />
    </div>
  );
}
export default Navigate;

接下來，在 src/components 資料夾下建立一個檔案 App.js 並開始編輯。App 元件的目的是在一個元件中處理所有螢幕。它將配置路由並啟用導航到所有其他元件。

我們將 React 庫和應用的其他元件匯入到 App.jsx。在最新版本的 React 中，我們只使用 <Route> 標記，而不是 Switch。這就是巢狀路由發生的地方。

App.jsx

import { Route, Routes, BrowserRouter } from "react-router-dom";
import "./App.css"
import Home from "./Router/Home";
import About from "./Router/About";
import Contact from "./Router/Contact";
import Navigate from "./Router/Navigate";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate />}>
            <Route index element={<Home />} />

            <Route path="About" element={<About />} />

            <Route path="Contact" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

接下來，使用 npm 命令啟動應用。

npm start

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。

嘗試導航連結並確認路由是否正常工作。

React Router 的優點

以下是 React Routing 的優點列表 −

• 如果渲染的資料量較少，則元件之間的路由會更快。

• 在不同元件之間切換時，實現動畫和過渡變得更容易。這提供了更好的使用者體驗。

• 允許在不重新整理頁面的情況下進行導航，因為它允許單頁 Web 或移動應用。