React Router 是一个用于在 React 应用中处理路由的库。它允许你定义应用程序中的多个页面,并在 URL 改变时显示不同的内容。
要使用 React Router,你需要首先安装它:
npm install react-router-dom
然后,在你的应用中引入所需的组件和函数:
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams,
useRouteMatch,
useHistory,
useLocation,
Redirect,
Prompt
} from 'react-router-dom';
接下来,你可以定义你的路由。下面是一个简单的例子:
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users/:id">
<User />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function User() {
let { id } = useParams();
return <h2>User: {id}</h2>;
}
在这个例子中:
- 我们创建了一个
Router
组件来包裹我们的整个应用。 - 在导航栏中,我们使用
Link
组件来创建链接到不同页面的按钮。 - 使用
Switch
组件来渲染与当前 URL 匹配的第一个子Route
组件。 - 对于每个
Route
组件,我们指定了一个路径(path)和一个呈现该路径内容的组件。 - 当访问
/users/:id
路径时,我们可以使用useParams
钩子从 URL 中获取参数值。
这只是 React Router 的基本用法,实际上它还提供了许多其他功能,如嵌套路由、动态路由匹配等。
嵌套路由
你可以使用 Route
组件的 children
属性来创建嵌套路由。例如:
function Users() {
return (
<div>
<h1>Users</h1>
<Switch>
<Route exact path="/users">
<AllUsers />
</Route>
<Route path="/users/:id">
<SingleUser />
</Route>
</Switch>
</div>
);
}
在这里,当你访问 /users
时,将显示所有用户列表;当访问 /users/:id
时,将显示单个用户的信息。
动态路由匹配
React Router 允许你在路由路径中使用动态参数。这些参数以冒号 (:
) 开头,表示它们可以接受任何字符串。例如:
<Route path="/users/:id" component={UserProfile} />
在这个例子中,:id
是一个动态参数。当访问 /users/42
或 /users/bob
时,都会被匹配并传递给 UserProfile
组件。
路由钩子
React Router 提供了一系列有用的钩子,可以帮助你在组件内部处理路由相关的操作。例如:
useParams()
:从 URL 中提取参数值。useRouteMatch()