React-Router-DOM是React官方提供的一款用于管理路由的库,可以将网页按照不同的URL路径分成若干个页面,并进行跳转、刷新等操作。
React-Router-DOM提供了多种路由组件,包括Router、Route、Switch、Link等等。
1. 安装React-Router-DOM
npm install react-router-dom
2. 在代码中引入React-Router-DOM
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
3. 在Router组件中定义各个路由
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
4. 使用Link组件进行页面跳转
<Link to="/about">About</Link>
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Contact() {
return <h2>Contact</h2>;
}
function App() {
return (
<Router>
<div>
<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 exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}
export default App;