在React中,react-router-dom是一個用于實現路由功能的庫。它提供了一些組件和API來實現URL的導航和頁面的切換。
使用react-router-dom,首先需要安裝該庫:
npm install react-router-dom
然后,在應用的頂層組件(通常是App組件)中,引入react-router-dom的相關組件和API。
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
{/* 應用的其他組件 */}
</Router>
);
}
import { Route } from 'react-router-dom';
function App() {
return (
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
上面的例子中,當URL為"/“時,渲染Home組件;當URL為”/about"時,渲染About組件。
import { Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
上面的例子中,點擊"Home"鏈接會改變URL為"/“,從而渲染Home組件;點擊"About"鏈接會改變URL為”/about",從而渲染About組件。
以上是react-router-dom的一些常用用法,還有很多其他功能和API可以根據實際需求進行使用。