在React开发中，React-Router被广泛使用。React-Router-3是一款流行的React路由库，它提供了多种路由匹配方式和导航方式，使得React单页应用的开发和管理更加方便。本文将介绍React-Router-3的安装和基本使用方法，帮助开发者快速学习和掌握React-Router-3。
安装React-Router-3
React-Router-3是通过npm包管理器进行安装的，因此我们可以使用以下命令进行安装：
npm install react-router@3 --save
注意，上述命令中使用了@3来指定React-Router版本为3.x，因为最新版的React-Router已经升级到了4.x版本，有些API已经发生了变化。因此，在React-Router-3中需要注意不同版本API的使用方式。
基本使用方法
基本组件
React-Router-3提供了4种基本组件，分别是：
Router：定义了一个路由容器，负责路由规则匹配和渲染组件。Route：定义了一条路由规则，用于匹配URL和显示组件。Link：定义了一个导航链接，用于在不同页面之间进行跳转。IndexRoute：定义了一个默认路由规则，当路径与当前路由匹配时，显示该组件。
解析路由
在使用React-Router-3时，我们需要在应用的入口处定义一个Router组件，用于解析路由规则。例如，我们可以在index.js文件中定义一个Router组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ------ --------------- ---- ---------------
------ --- ---- --------
----------------
------- -------------------------
------ -------- ----------------
--------
----------
-------------------------------
--在上述代码中，我们定义了一个Router组件，并传递了一个history属性（browserHistory）和一个Route组件。history属性表示浏览器的URL历史记录，它会被用于解析路由规则。Route组件表示一条路由规则，它会匹配路径为"/"的链接，并渲染App组件。
嵌套路由
在React-Router-3中，我们可以利用Route组件的children属性，定义嵌套的路由规则。例如，我们可以在App组件中定义一个子路由组件Home：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------
------ --- ---- --------
------ ---- ---- ---------
------ ------- -
------ -------- ----------------
------ ------------ ------------------
--------
--上述代码中，我们定义了一个名为Home的组件，并在应用的Router组件中嵌套了此组件。当用户访问路径为"/home"时，该组件会被匹配和渲染。这样就实现了路由的嵌套和管理。
路由参数
在React-Router-3中，URL中的参数可以在路由规则中使用冒号（:）进行定义。例如，我们可以在路由规则中定义一个名为id的参数：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------
------ --- ---- --------
------ ------- ---- ------------
------ ------- -
------ -------- ----------------
------ ------------------- ---------------------
--------
--上述代码中，我们定义了一个名为Article的组件，并定义了一个名为id的路由参数。当用户访问路径为"/article/123"时，该组件会被匹配和渲染，并接受id参数（123）进行自定义渲染。
路由重定向
在React-Router-3中，我们可以使用Redirect组件进行路由重定向。例如，我们可以在路由规则中定义一个重定向规则：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- --------- ---- ---------------
------ --- ---- --------
------ ----- ---- ----------
------ ------- -
------ -------- ----------------
------ ------------- -------------------
--------- --------------- -------------
--------
--上述代码中，我们定义了一个名为Redirect的组件，并将"/profile"路径重定向到"/login"路径。当用户访问路径为"/profile"时，会自动重定向到"/login"路径。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ------ --------------- --------- ---- ---------------
------ --- ---- --------
------ ---- ---- ---------
------ ------- ---- ------------
------ ----- ---- ----------
----------------
------- -------------------------
------ -------- ----------------
------ ------------ ------------------
------ ------------------- ---------------------
------ ------------- -------------------
--------- --------------- -------------
--------
----------
-------------------------------
--总结
React-Router-3是一款非常流行的React路由库，它提供了多种路由匹配方式和导航方式，使得React单页应用的开发和管理更加方便。本文介绍了React-Router-3的安装和基本使用方法，希望可以帮助开发者快速学习和掌握React-Router-3。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fa81e8991b448e41ee