歡迎回到我們的 React 系列！在先前的文章中，我們介紹了元件、狀態、道具和事件處理等基本概念。現在，是時候使用 React Router 探索 React 應用程式中的路由了。路由允許您在應用程式內的不同視圖或元件之間導航，從而創建無縫的使用者體驗？ .
React Router 是一個功能強大的函式庫，可以在 React 應用程式中實現路由。它允許您在應用程式中定義多個路由並根據 URL 路徑呈現特定元件。此功能對於建立導覽不需要重新載入整頁的單頁應用程式 (SPA) 至關重要。
安裝 React Router
首先，您需要安裝 React Router。您可以使用 npm 來執行此操作：
npm install react-router-dom
讓我們設定一個具有多個路由的簡單應用程式。我們將創建一個帶有主頁、關於頁面和聯絡頁面的應用程式。
1。建立基本組件
首先，建立三個元件：主頁、關於和聯絡方式。
// Home.js
import React from 'react';
const Home = () => {
return <h1>Home Page</h1>;
};
export default Home;
// About.js
import React from 'react';
const About = () => {
return <h1>About Page</h1>;
};
export default About;
// Contact.js
import React from 'react';
const Contact = () => {
return <h1>Contact Page</h1>;
};
export default Contact;
2。設定路由器
現在，讓我們在主應用程式檔案（通常是 App.js）中設定路由器。
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
const App = () => {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};
export default App;
說明：
在頁面之間導航
設定完成後，您現在可以透過點擊導覽功能表中的連結在主頁、關於和聯絡頁面之間導覽。 React Router 將處理 URL 變更並渲染適當的元件，而無需刷新頁面。
路由參數
您也可以使用參數定義路由，從而允許傳遞動態資料。例如，我們建立一個 User 元件，根據 URL 中的使用者 ID 顯示使用者資訊。
1。建立使用者元件
使用者.js：
import React from 'react';
import { useParams } from 'react-router-dom';
const User = () => {
const { userId } = useParams();
return <h1>User ID: {userId}</h1>;
};
export default User;
2。更新路由器
在 App.js 中為 User 元件新增路由：
<Route path="/user/:userId" component={User} />
巢狀路由
React Router 也支援巢狀路由，它允許您在父元件中渲染子路由。這對於建立複雜的佈局很有用。
巢狀路由範例：
npm install react-router-dom
// Home.js
import React from 'react';
const Home = () => {
return <h1>Home Page</h1>;
};
export default Home;
// About.js
import React from 'react';
const About = () => {
return <h1>About Page</h1>;
};
export default About;
// Contact.js
import React from 'react';
const Contact = () => {
return <h1>Contact Page</h1>;
};
export default Contact;
現在，導覽至 /dashboard/profile 或 /dashboard/settings 將在儀表板中呈現對應的元件。
在這篇文章中，我們探討如何使用 React Router 在 React 應用程式中實作路由。我們介紹了設定基本路由、在頁面之間導航、使用路由參數以及建立巢狀路由。
利用這些概念，您可以為 React 應用程式建立結構化導航系統，從而增強使用者體驗並實現動態內容渲染。
在下一篇文章中，我們將深入研究 React Hooks 的使用，重點關注 useEffect 以及它如何管理功能組件中的副作用。請繼續關注！
以上是使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
