React Router是一個(gè)用于在React應(yīng)用中實(shí)現(xiàn)路由功能的庫。它允許你在不刷新頁面的情況下在不同的組件之間進(jìn)行導(dǎo)航,并且可以通過URL來管理頁面的狀態(tài)。
下面是一個(gè)簡(jiǎn)單的React Router示例:
npm install react-router-dom
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const App = () => (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
export default App;
在上面的示例中,我們創(chuàng)建了兩個(gè)組件Home
和About
,并使用BrowserRouter
包裹整個(gè)應(yīng)用,然后通過Link
組件和Route
組件來定義導(dǎo)航和路由。
npm start
現(xiàn)在你可以在瀏覽器中查看應(yīng)用,并通過點(diǎn)擊鏈接來導(dǎo)航到不同的頁面。
除了基本的路由功能,React Router還提供了許多高級(jí)功能,如嵌套路由、路由參數(shù)、重定向等。你可以查閱React Router的官方文檔來了解更多使用方法和配置選項(xiàng)。
希望這個(gè)簡(jiǎn)單的教程能幫助你開始使用React Router來管理應(yīng)用中的路由功能。祝你編程愉快!