react之react-router

照張办事 發表於 2021-5-18 09:15:00

<h2>1.什么是react-router</h2>
<p>react-router是第三方为react开发单页应用开发出来的一个库，只有学习了react-router之后，我们就可以使用react开发spa应用了，源码地址：<br></p>
<p>https://github.com/ReactTraining/react-router 官网地址：https://reacttraining.com/react-router/</p>
<h2>2.什么是spa应用</h2>
<p>spa的全称是signal page application 单页应用，就是所有的功能都是在一个页面进行完成的，这个主要是和传统的pc端网页比较形成的（就是a标签跳转），主要是单页的用户体验，类似native app（原生的app 就是手机里面的那些app，一般都存在底部导航栏，在做切换的时候，页面上很多内容会被复用。）的体验。</p>
<p>spa 的底层原理：1.锚点（hash）window.onhashchange 2.h5(history) 3.ajax 可以（不能来回跳转，没有历史记录）4.iframe 框架集（不友好）</p>
<h2>3.react-router的使用</h2>
<h3>3.1 创建react 应用</h3>
<p>使用命令 <span style="color: rgba(255, 0, 0, 1)">npx create-react-app demo-app <span style="color: rgba(0, 0, 0, 1)">来创建，然后通过命令进入 </span></span><span style="color: rgba(255, 0, 0, 1)"><code class="language-sh"><span class="token builtin class-name">cd demo-app</span></code></span></p>
<p><span class="token builtin class-name">使用命令安装react-router核心库</span><em style="font-family: "Courier New"; font-size: 12px"><span class="token builtin class-name"> </span></em><span style="color: rgba(255, 0, 0, 1)"><code class="language-sh"><span class="token function">npm </span></code><code class="language-sh"><span class="token function"><span class="token function">install react-router-dom</span></span></code><em id="__mceDel" style="font-family: "Courier New"; font-size: 12px"><code class="language-sh"><span class="token function"><span class="token function"> </span></span></code></em></span></p>
<p><span style="color: rgba(0, 0, 0, 1)"><span class="token function"><span class="token function">然后使用<span style="color: rgba(255, 0, 0, 1)">npm start</span>启动项目</span></span></span></p>
<h3><span style="color: rgba(0, 0, 0, 1)"><span class="token function"><span class="token function">3.2 路由基本使用</span></span></span></h3>
<p><span style="color: rgba(0, 0, 0, 1)"><span class="token function"><span class="token function">1）按需导入以下组件</span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> React from "react"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">import</span><span style="color: rgba(0, 0, 0, 1)"> {
BrowserRouter as Router,
Switch,
Route,
Link
} from </span>"react-router-dom";</pre>
</div>
<p> </p>
<p>BrowserRouter as Router 为前面的组件取一个别名，主要的原因是react-router 提供了两个路由的容器：（1）BroswerRouter（2）HashRouter 称之为：路由的容器，所有的路由操作都必须定义在该组件下面。</p>
<p>Route 翻译过来是路线的意思，需要该组件定义好路径和显示组件的对应关系</p>
<p>Link 底层就是a链接，实现声明式的跳转</p>
<p>在项目根目录下创建一个components目录在其下面创建三个文件夹分别为Home，News，Profile，在每个文件夹下面分别再建一个index.js文件，内容如下</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> React, { Component } from 'react'

<span style="color: rgba(0, 0, 255, 1)">class</span> Home <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> Component{
render(){
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div>
         <h2>Home组件</h2>
   </div><span style="color: rgba(0, 0, 0, 1)">
}
}

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Home</pre>
</div>
<p>然后在App.js里面将每个组件进行引入</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> Home from './components/Home'
<span style="color: rgba(0, 0, 255, 1)">import</span> News from './components/News'
<span style="color: rgba(0, 0, 255, 1)">import</span> Profile from './components/Profile' </pre>
</div>
<p>最后在App.js里面编写路由跳转</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">class</span> App <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> Component {
render(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <Router>
   <div>
   <h1>react路由</h1>
   <Link to="/home">首页</Link>
   <Link to="/news">新闻</Link>
   <Link to="/profile">个人</Link><span style="color: rgba(0, 0, 0, 1)">
   {</span><span style="color: rgba(0, 128, 0, 1)">/**</span><span style="color: rgba(0, 128, 0, 1)">定义映射关系 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">}
   </span><Route path="/home" component={Home} />
   <Route path="/news" component={News} />
   <Route path="/profile" component={Profile} />
   </div>
</Router><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p><strong>children的使用</strong></p>
<div class="cnblogs_code">
<pre>    <Route path='/about' children={()=><span style="color: rgba(0, 0, 0, 1)">{
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div>
         <h2>children组件</h2>
      </div><span style="color: rgba(0, 0, 0, 1)">
   }}</span>/></pre>
</div>
<p>特性：（1）无论我的URL地址里面hash是否和hash进行怎么样的匹配，对于children里面的组件都会被渲染出来（2）children函数式组件可以接受一个参数props，如果path和URL地址的hash匹配上，则props里面的match属性就是一个对象，对象里面包含了地址相关的信息，如果匹配不上，值为null，但是组件还是渲染。</p>
<p><strong>render的使用</strong></p>
<div class="cnblogs_code">
<pre>    <Route path='/renders' render={()=><span style="color: rgba(0, 0, 0, 1)">{
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div>
         <h2>render函数式组件的渲染</h2>
      </div><span style="color: rgba(0, 0, 0, 1)">
   }} </span>/></pre>
</div>
<p>特性：render属性值是一个函数式组件，当前URL地址的和path匹配的时候，就会加载该函数式组件，可传一个参数props，它包含以下几个属性（1）history主要是做函数导航，（2）location代表的url地址信息（3）match代表路由传参，例：/news/14</p>
<h3>3.3 嵌套路由</h3>
<p>这里以上述案例的新闻为例，这是index.js页面</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> React, { Component } from 'react'
<span style="color: rgba(0, 0, 255, 1)">import</span> {Link,Route} from 'react-router-dom'
<span style="color: rgba(0, 0, 255, 1)">import</span> Detail from './Detail'
<span style="color: rgba(0, 0, 255, 1)">class</span> News <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> Component {
render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div>
         <h2>News组件</h2>
         <hr />
         <ul>
            <li><Link to='/news/detail/1/13'>新闻一</Link></li>
            <li><Link to='/news/detail/2/34'>新闻二</Link></li>
            <li><Link to='/news/detail/3/43'>新闻三</Link></li>
            <li><Link to='/news/detail/4/24'>新闻四</Link></li>
         </ul>
         <hr/>
         <h3>新闻的详情-ID-</h3>
         <Route path="/news/detail/:news_id/:type" component={Detail}/>
   </div><span style="color: rgba(0, 0, 0, 1)">
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> News</pre>
</div>
<p>下面是detail.js页面，用来获取详细路由传值，这里用到了内置属性props</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> React from 'react'<span style="color: rgba(0, 0, 0, 1)">

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> <span style="color: rgba(0, 0, 255, 1)">class</span> Detail <span style="color: rgba(0, 0, 255, 1)">extends</span><span style="color: rgba(0, 0, 0, 1)"> React.Component{
render(){
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div>
         <h2>新闻的详情展示</h2>
         <p>ID:{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.match.params.news_id}-{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.match.params.type}</p>
   </div><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<h3>3.4 编程式导航</h3>
<p>定义一个按钮进行跳转</p>
<div class="cnblogs_code">
<pre><button onClick={()=><span style="color: rgba(0, 0, 255, 1)">this</span>.clickHandler()}>点击回到首页</button><span style="color: rgba(0, 0, 0, 1)">

clickHandler</span>=()=><span style="color: rgba(0, 0, 0, 1)">{
   </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">参数1，代表要跳转的路径,参数2，代表跳转的时候，可以携带路由参数(不是必须的)</span>
   <span style="color: rgba(0, 0, 255, 1)">this</span>.props.history.push('/home',{info:'从'+<span style="color: rgba(0, 0, 255, 1)">this</span>.props.location.pathname+'从这里过来的'<span style="color: rgba(0, 0, 0, 1)">})
}</span></pre>
</div>
<h3>3.5 NotFound组件</h3>
<p> </p>
<p><span style="color: rgba(0, 0, 0, 1)"><span class="token function"><span class="token function">当我们输入路径找不到对应路由的时候，我们可以定义一个notfound页面，页面内容自定义即可</span></span></span></p>
<p><span style="color: rgba(0, 0, 0, 1)"><span class="token function"><span class="token function">在app.js 引入并使用notfound</span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> NotFound from './components/NotFound'

<Route component={NotFound}/></pre>
</div>
<p> </p>

</div>
<div id="MySignature" role="contentinfo">
<style>
#MySignature {
   display: block;
background-color: #95FFE9;
border-radius: 7px;
box-shadow: 1px 1px 1px #6B6B6B;
padding: 10px;
line-height: 1.5;
text-shadow: 1px 1px 1px #FFF;
font-size: 16px;
}
#MySignature a {
   margin: 0;
   padding: 0;
   display: contents;
}
</style>

<p style="color: #8B0011;">一点点学习，一丝丝进步。不懈怠，才不会被时代所淘汰!</p><br><br>
来源：https://www.cnblogs.com/fqh2020/p/14776359.html

頁: [1]

琼殿技术论坛's Archiver

react之react-router