React Router

目录

一、React Router

1、React Router 的用途

2、React Router 的多元化

二、react-router

1、安装 react-router

2、react-router 的 API

三、react-router-dom（web 端推荐使用）

1、安装 react-router-dom

2、react-router-dom 的三种内置组件

（1）、路由组件

（2）、路由匹配组件

（3）、导航组件

四、react-router-redux

五、react-router-native

六、React Router 学习资源

---

一、React Router

1、React Router 的用途

保持 UI 与 URL 同步。

2、React Router 的多元化

React Router 提供了多个包：

• react-router：实现了路由的核心功能。提供了 router 的核心 api。如：Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的 api。
• react-router-dom：在 react-router 的基础上的扩展，新增了在浏览器运行环境下的一些功能。提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。
• react-router-native： 在 react-router 的基础上的扩展，新增了 react-native 运行环境下的一些功能。
• react-router-redux：在 react-router 的基础上的扩展，新增了 React Router 和 Redux 的集成。让 routing 信息在 Redux Store 里也存一份，这样使用 Redux Devtools 时，可以方便地进行时间旅行(Time Travel)，从一个状态跳到另一个状态。
• react-router-config：在 react-router 的基础上的扩展，新增了对静态路由辅助的程序。

这些包可以单独使用。

 

二、react-router

官方文档：http://react-guide.github.io/react-router-cn/index.html

1、安装 react-router

npm i react-router -S
// 或
yarn add react-router  

2、react-router 的 API

react-router 的 API

3、react-router 的使用

React中的路由react-router

 

三、react-router-dom（web 端推荐使用）

文档：https://reactrouter.com/web/guides/quick-start

在浏览器上，我们只需引用 react-router-dom 这一个包就行，因为：react-router-dom 里包含了 react-router 的依赖。

1、安装 react-router-dom

npm i react-router-dom -S
// 或
yarn add react-router-dom  

2、react-router-dom 的三种内置组件

路由组件、路由匹配组件 和 导航组件。

（1）、路由组件

<BrowserRouter> 和 <HashRouter>

• <BrowserRouter>：基于 HTML5 history API (pushState, replaceState, popstate) 事件。
• <HashRouter>：基于 window.location.hash。

（2）、路由匹配组件

<Route> 和 <Switch>

• <Route>：可以设置三种属性：
  • component
  • render
  • children
• <Switch>：把多个路由组合在一起。

（3）、导航组件

<Link>，<NavLink> 和 <Redirect>

• <Link>
• <NavLink>
• <Redirect>

 

四、react-router-redux

文档：https://www.npmjs.com/package/react-router-redux

npm i react-router-redux -S
// 或
yarn add react-router-redux

 

五、react-router-native

文档：https://github.com/jmurzy/react-router-native

npm i react-router-native -S
// 或
yarn add react-router-native 

 

六、React Router 学习资源

React中的路由react-router（推荐好文）

React Router 使用教程——阮一峰（react-router）

React Router教程——IT老马（react-router-dom ）

React Router v4 几乎误我一生——程墨

心中无路由，处处皆自由/react-router v4 动态路由——牛蛙泳 （静态路由与动态路由）