react-router简介

Posted 2021-01-17 hzhuxin

　　Web应用中的路由的作用和原理：保证视图和URL的同步，可以把视图看成资源的一种表现。当用户在页面中进行操作时，应用会在若干个交互状态中切换，比如用户会单击浏览器的前进、后退按钮进行切换等。路由系统的职责之一就是记录一些重要的状态，比如用户的登录状态、当前访问资源、用户的上一访问资源等，并根据需要重新以同步或异步的方式向服务端请求获取资源，然后重新渲染视图。

　　在传统的多页面应有开发中，路由的概念仅仅存于后端Web应用服务器端（后端路由），现在则逐渐向前端延伸，形成前端路由框架。react-router则是与React配套的前端框架路由系统，它通过管理URL，实现React组件的切换和状态的变化。

       学习react-router 可以看其作者的官网的资料 https://reacttraining.com/react-router 。在使用前，首先要了解 react-router ( https://github.com/ReactTraining/react-router ) 和

react-router-dom (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom )的区别。

• 　react-router

　　　　React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

• 　react-router-dom

　　　　React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

 

     具体学习使用 react-router和react-router-dom可参照这篇文章：React-router4简约教程