React：react-router-dom 详解
<p>使用react构建单页面应用：</p><p> 实现方法：（1）react-router</p>
<p> （2）react-router-dom</p>
<p><code>react-router</code>: 实现了路由的核心功能，而react-router-dom依赖react-router，</p>
<p><code>react-router-dom</code>: 基于<code>react-router</code>，加入了在浏览器运行环境下的一些功能：</p>
<p> <code>Link</code>组件，会渲染一个<code>a</code>标签；</p>
<p> BrowserRouter组件，使用<code>pushState</code>和<code>popState</code>事件构建路由；</p>
<p> <code>HashRouter</code>组件，使用<code>window.location.hash</code>和<code>hashchange</code>事件构建路由。</p>
<p><code> react-router-native</code>: 基于<code>react-router</code>，类似<code>react-router-dom</code>，加入了<code>react-native</code>运行环境下的一些功能。</p>
<p>react-router-dom路由详解:</p>
<p> 静态路由:</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923201238749-1366410715.png"></p>
<p> </p>
<p> </p>
<p> 然后我们在index.js中引入路由组件进行渲染：</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923201429301-1444269509.png"></p>
<p> </p>
<p> </p>
<p> 我们可以使用<code>a</code>标签或<code>Link组件</code>进行路由的跳转，Link从react-router-dom引入；</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923201711448-410632531.png"></p>
<p> 动态路由传参：</p>
<p><span class="token keyword"> 第一种：在组件的路由后面加/：id；</span></p>
<p><span class="token keyword"> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923203530207-1113746680.png"></span></p>
<p><span class="token keyword"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><span class="token attr-name"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"> 然后我们在对应组件Detail中修改代码来进行获取ID：</span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></p>
<p><span class="token keyword"><span class="token tag"><span class="token tag"><span class="token punctuation"><span class="token attr-name"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923203656238-1021917523.png"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p> 第二种：</p>
<p> 隐式传参（通过函数跳转）：</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923204358740-677740855.png"></p>
<p> </p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923204412613-1884570952.png"></p>
<p> </p>
<p> 重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转： </p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923204550093-963304424.png"></p>
<p> </p>
<p> 返回上级页面使用：</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483889/201909/1483889-20190923204632740-1635322082.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<pre class="line-numberslanguage-xml"><em id="__mceDel"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><span class="token attr-name"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"> </span></span></span></span></span></span></span></span></span></span></span></span></span></code></em></pre>
<pre class="line-numberslanguage-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><span class="token attr-name"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token attr-name"><span class="token attr-value"><span class="token punctuation"><span class="token punctuation"> </span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p> </p>
<pre class="line-numberslanguage-javascript"><code class="javascriptlanguage-javascript"><span class="token keyword"><br> </span></code></pre>
<p> </p>
<p> </p><br><br>
来源：https://www.cnblogs.com/lovels/p/11574700.html
頁:
[1]