React Router 是一个基于 React 的路由库,它允许你为单页应用(SPA)创建复杂的导航。以下是一些关于 React Router 的基本概念和用法。
安装
首先,你需要安装 React Router。你可以使用 npm 或 yarn 来安装:
npm install react-router-dom
# 或者
yarn add react-router-dom
基本用法
React Router 主要由三个组件组成:<Router>
, <Route>
, 和 <Switch>
。
<Router>
是路由器的顶层组件,它需要一个history
对象作为属性。<Route>
是路由匹配组件,它需要一个path
属性来指定路由路径,以及一个component
属性来指定当路径匹配时渲染的组件。<Switch>
是一个容器组件,它只会渲染第一个匹配的<Route>
或<Redirect>
。
以下是一个简单的例子:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
export default App;
高级用法
React Router 还支持许多高级用法,例如:
- 动态路由匹配
- 嵌套路由
- 命名路由
- 导航守卫
更多高级用法,请参考官方文档。
React Router Logo