React Router v4 是一个基于 React 的小型路由库，它将 URL 和 React 组件连接在一起。本文将介绍 React Router v4 的基础知识和用法，并提供示例代码帮助你开始使用。
安装
使用 npm 安装 React Router:
npm install react-router-dom
路由的基本概念
路由是指站点的不同页面之间的导航关系。在 React 中，路由被表示为组件树。
路由器是一个组件，它提供了路由管理的上下文，例如将 URL 地址映射到组件。
路由是指将 URL 转换为组件的过程。
链接组件用于将用户从当前页面转移到其他页面。
路由器的使用
为了使用 React Router v4，你需要使用 <BrowserRouter> 组件作为应用程序的根组件。在一个 React 应用程序中，通常只应使用一个 <BrowserRouter>。
在应用程序中，将所有需要路由的组件包裹在 <BrowserRouter> 组件中。这些组件可以使用 <Route> 组件将 URL 路径映射到特定的组件，并使用 <Link> 组件将用户从一个页面导航到另一个页面。
下面是一个简单的示例，展示了如何在应用程序中使用 <BrowserRouter> 和 <Route> 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------ ---- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
----- --- - -- -- -
---------------
-----
----
--------- -----------------------
--------- -----------------------------
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
----------------
--在这个示例中，<BrowserRouter> 组件包装了整个应用程序。导航条上有两个链接，每个链接都指向一个特定的页：/ 和 /about。<Route> 组件将这些 URL 路径映射为特定组件的渲染。在此示例中，当用户访问/页面时，<Home> 组件将被渲染，访问 /about 页面时，<About> 组件将会被渲染。
动态路由
React Router 支持动态路由，使我们可以使用路由参数来渲染组件。例如，如果我们想为特定的用户 ID 渲染一个用户资料页面，我们可以使用以下路由：
<Route path="/users/:userId" component={UserDetail} />这时候我们可以使用 this.props.match.params.userId 获取到 URL 参数。
嵌套路由
React Router 还支持嵌套路由。嵌套路由表示在当前路由的基础上添加子路由。例如，我们可以使用以下路由在 “/users” 页面上嵌套一个 “/users/:userId” 页面：
<Route path="/users" component={Users}>
<Route path="/users/:userId" component={UserDetail} />
</Route>在此示例中，当用户访问 “/users” 页面时，<Users> 组件将被渲染，当用户访问 “/users/:userId” 页面时，将会渲染 <UserDetail> 组件。
重定向
React Router 还提供了一个 <Redirect> 组件，它可以将用户从一个 URL 重定向到另一个 URL。
例如，假设我们想让用户从旧的 URL （/home）重定向到应用程序的新主页 URL （/）时，可以使用以下路由：
<Route exact path="/home" render={() => <Redirect to="/" />} />使用 Switch 组件
在路由中，当 URL 匹配多个路径时，会优先匹配第一个路径。我们可以使用 <Switch> 组件来将多个 <Route> 组合在一起，确保只有一个路由被匹配。
-- -------------------- ---- ------- ------ - ------- ----- - ---- ------------------- -- --- -------- ------ -------- ----- ---------------- -- ------ ------------- ----------------- -- ------ -------------------- -- ---------
在这个示例中，<Switch> 组件确保只有一个路径会被匹配。如果访问 /，那么 <Home> 组件将被渲染。如果访问 /about，则 <About> 组件将被渲染。如果访问任何未定义的路径，<NotFound> 组件将被渲染。
结论
React Router v4 是 React 中使用路由的推荐方式，并且由于其灵活性和易用性，在 React 社区中受到广泛认可。本文介绍了 React Router 的基本概念和用法，并提供了示例代码，帮助你开始使用路由。
如果你在使用 React 或将来会使用它，并且需要处理路由，请你考虑使用 React Router v4。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6cc32c5c563ced58c1b86