React躬行记（13）——ReactRouter

在网络工程中，路由系统就像导航一样，确保信息从源头准确地传输到目的地，避免在互联网上迷路。
前端应用中的路由也保证了信息的准确性和效率，但使用URL地址作为信息源，以HTML页面作为目的地。
传统的多页面应用中，每个页面对应一个URL，服务器根据URL进行响应并渲染页面。
刷新整个页面的缺点是显而易见的。
不仅浪费资源，还影响用户体验的流畅度。
为了解决多页面应用程序的缺点，创建了单页面应用程序（SPA）。
SPA通过JavaScript加载动态内容，减少与服务器的通信并提供无缝的用户体验。
即使名称中包含“单页面”，浏览器中的URL仍会发生变化，以保持与多页面应用程序的同步。
ReactRouter作为官方推荐的路由库，为实现SPA提供了强大的支持。
ReactRouter经历了多个版本的迭代和优化。
从最初的1.0版本到最新的v5，在版本的发展中，已经实现了路由的声明式处理，功能也越来越完善。
V4版本重写了内部结构，采用了组件化开发和动态路由机制，简化了API，降低了学习成本，但项目升级难度有所增加。
最新的v5版本与v4完全兼容。
取决于react-router库。
ReactRouter的核心组件包括router、route和navigation。
Router作为一个基础组件，主要负责创建和管理整个路由系统。
在v5版本中，router组件可以包裹任意数量的子元素，大大提高了灵活性。
Route组件包含一个历史对象，用于管理会话历史、监控URL变化、分析和匹配路由，最后渲染相应的组件。
故事对象是关键部分。
可以根据不同的创建功能实现不同的功能。
例如MemoryRouter适合非浏览器环境，HashRouter通过_window.location.hash保持页面和URL同步。
History对象提供了管理历史记录的通用API，例如pushState、replaceState等。
在浏览器环境中，通常使用BrowserRouter或HashRouter组件。
BrowserRouter组件通过HTML5的HistoryAPI保持页面和URL同步，并且它创建的URL格式更符合现代浏览器的期望。
但要使用BrowserRouter，服务器配置是必不可少的，例如Nginx或Node服务器等。
配置参数一定要参考相关文档，避免出现404错误。
HashRouter组件使用_window.location.hash来维护页面和URL之间的关联。
URL格式包含井号，不依赖于服务器配置，可以有效避免刷新页面时出现404错误。
路由组件负责配置路由信息，当URL与路由组件的path属性匹配时，就会渲染对应的组件。
路由组件提供了多种属性和渲染方式，如path、exact、string等，以及component、rendering、child等属性，实现灵活的路由和组件渲染。
此外，Switch组件还用于优化路由匹配过程，确保只渲染第一个与路径匹配的组件。
当涉及到页面之间的导航时，Link、NavLink和Redirect组件成为关键。
其中Link组件用于触发路由匹配和更新URL，同时避免重新加载页面。
NavLink组件增强了Link的功能，允许自定义样式、限制匹配规则、优化无障碍阅读等。
重定向组件用于导航到新地址，类似于服务器端重定向。
ReactRouter和Redux的集成是通过高阶组件withRouter实现的，它使组件能够监控路由变化并简化状态管理。
通过withRouter包装组件，可以自动获取路由对象，提高组件之间的解耦，让状态管理更加高效。
通过集成Redux，可以实现更复杂的应用程序状态管理。
第一步是创建ReduxAction、Reducer和Store作为路由集成的基础。
第二步是自定义组件，使用Link、Route、WithArticle等组件来实现路由和导航。
第三步使用react-redux库的Provider组件来包装router组件，将其注入到store中，最后将所有组件渲染到页面上。

HTML5如何才能让导航栏固定顶部不动，且！且！且！不遮挡住下面的DIV？？？

HTML5修复了顶部的导航栏，并且不遮挡底部的DIV。

2后者是网站特有的内容，这里的代码比较简单。

3.有了样式，首先在菜单中定义一些样式。

4这次运行页面时，滚动条换行后导航就会消失。

5.固定顶部导航栏的样式设置：固定的最大限度：0;，所以位置是固定的。

6此时页面开始运行，页面向上滚动，导航始终位于顶部。