react-router v5笔记
<p>官方文档 https://reacttraining.com/react-router/web/guides/quick-start</p><p>中文文档 https://react-router.docschina.org/web/example/basic</p>
<p>git地址 https://github.com/ReactTraining/react-router#readme</p>
<p>react-router是与react配合使用的路由库，react-router提供多个包可以单独使用。</p>
<p><img src="https://img2018.cnblogs.com/blog/593850/201906/593850-20190611180314105-31589606.png"></p>
<p> react-router提供路由的核心功能，react-router-dom基于react-router提供了在浏览器运行环境下的一些功能，例如Link组件和BrowserRouter组件。react-router-native同样基于react-router，提供了react-native运行环境下的一些功能。</p>
<p> 如果基于浏览器环境的开发，在使用npm安装包时只需要安装react-router-dom即可，不需要再显示的安装react-router包，因为在安装react-router-dom时npm会解析package.json文件安装依赖。</p>
<p> 所以下面两种写法是等效的</p>
<p>写法1:</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">import {<span class="pl-smi">Swtich, <span class="pl-smi">Route, <span class="pl-smi">Router, <span class="pl-smi">HashHistory, <span class="pl-smi">Link} <span class="pl-k">from <span class="pl-s"><span class="pl-pds">'react-router-dom<span class="pl-pds">';</span></span></span></span></span></span></span></span></span></span></pre>
</div>
<p>写法2:</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">import {<span class="pl-smi">Switch, <span class="pl-smi">Route, <span class="pl-smi">Router} <span class="pl-k">from <span class="pl-s"><span class="pl-pds">'react-router<span class="pl-pds">';
<span class="pl-k">import {<span class="pl-smi">HashHistory, <span class="pl-smi">Link} <span class="pl-k">from <span class="pl-s"><span class="pl-pds">'react-router-dom<span class="pl-pds">';<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
<p> 在使用react-router编写路由时，和我们之前写的静态路由不太一样，静态路由是将路由声明在一处，并在应用程序渲染前导入，这个react-router v4之前的版本类似。react-router v4开始使用动态路由，这样就不需要将路由声明在一处，而是作为我们编写的react组件内容的一部分，Router组件就像div组件一样被使用，也就是在应用程序渲染时才发生路由。</p>
<p> React Router提供了三种类型的组件：router components路由器组件, route components路由组件, navigation components导航组件，三种组件都应该从react-router-dom导入。</p>
<p> router components路由器组件：对于 Web 项目，<code>react-router-dom</code> 提供了 <code><BrowserRouter></code> 和 <code><HashRouter></code> 路由。这两个路由都会为你创建一个专门的 <code>history</code> 对象。一般来说，如果你有一个响应请求的服务器，则你应该使用 <code><BrowserRouter></code> ，如果你使用的是静态文件的服务器，则应该使用 <code><HashRouter></code> 。</p>
<p> route components路由组件：路由匹配组件有Route和Switch，Router的作用是在location和path属性匹配时在此处渲染React组件，通过component、render和children三个属性来指向渲染组件，component属性通常指向一个现存的组件，render只有在需要传递参数给渲染组件时使用。Switch不是必须的，用于将Route组件分组并选择一个与当前地址匹配的第一个Route。</p>
<p> navigation components导航组件：有Link、NavLink和Redirect三个组件用于导航，Link组件会在Html中创建一个a标签，to属性指向一个导航地址。</p>
<p> 下面记录了一些常用的组件和属性，文档中有非常详细的例子可以参考。</p>
<p>Router：所有路由器组件的公用底层实现，通常我们会使BrowserRouter等高级组件代替。</p>
<p>BrowserRouter：使用 HTML5 历史 API 记录（ <code>pushState</code>，<code>replaceState</code> 和 <code>popstate</code> 事件）的 <code><Router></code> 使您的UI与URL保持同步。</p>
<p>Route：作用是在location和Route的path属性匹配时，在此处呈现UI。如有Route没有path会一直与它最近的父级匹配。</p>
<p>Switch：用于将Route或Redirect组件分组，选择第一个与地址匹配的Route渲染。</p>
<p>Link：提供可访问的导航，会在html中创建a标签。</p>
<p>match属性：match对象中包含了如何匹配URL的信息。</p>
<p>history属性：history对象实现对session历史的管理。</p>
<p>location属性：location属性代表应用程序现在在哪，你想去哪。</p>
<div>withRouter高阶组件：当路由渲染是，withRouter会将已更新的history、match和location属性传入被包裹的组件。</div>
<div>match、history和location对象都会在渲染Route组件时传入component、render和children指向的组件。</div>
<div> </div><br><br>
来源：https://www.cnblogs.com/ssw-men/p/11005260.html
頁:
[1]