在 React 中,路由用于定义不同的页面路径和对应的组件展示。常用的 React 路由库是 react-router-dom 。
主要的概念和组件包括:
1. BrowserRouter 或 HashRouter :提供路由的上下文环境。
- BrowserRouter 使用 HTML5 的 History API 来保持 URL 的整洁,没有 # 符号。
- HashRouter 在 URL 中使用 # 来处理路由,兼容性更好。
2. Route :定义路由路径和对应的组件。
3. Link :用于创建导航链接,点击时切换路由而无需页面刷新。
4. Switch :确保只匹配并渲染第一个匹配的路由。
例如:
jsx格式:
import { BrowserRouter as Router, Route, Link, Switch } from'react-router-dom';
function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</Router>
);
}
通过这样的设置,用户点击不同的 Link 时,对应的组件会根据路由路径进行展示。