小白程度学习react的路由

小白程度学习react的路由

今天来说说React的路由React-Router。它是官方维护的，事实上也是唯一可选的路由库。它通过管理URL，实现组件的切换和状态的变化，是React非常重要的组件。

剑有双刃，事物都有优缺点，强大的React路由也不例外。

1、优点：
(1).良好的交互体验
用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。
2).良好的前后端工作分离模式
单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。
3).减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；
2、缺点：
1).SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。
2).前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。
3).初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。

网址送上： https://reacttraining.com/react-router/

然后来说说路由安装步骤吧。

      1.npm i react-router-dom -S
      2.import { BrowserRouter as Router} from 'react-router-dom'
      3.ReactDOM.render(
              <Router>
                  <App />   在根节点下使用
              </Router>
              ,
              document.getElementById('root')
          )

      4.
          <Route path="/" component={Index}/>
          <Route path="/about" component={About}/>
          <Link to="/">说明</Link>

      5.
      exact:
          path    location.pathname   exact   matches?
          /one    /one/two    true    no
          /one    /one/two    false   yes


      strict:
          path    location.pathname   matches?
          /one/   /one            no
          /one/   /one/           yes
          /one/   /one/two        yes

在Route中如果写了component={组件}，那么如果要获取URL信息
可以去组件中的render函数中的this.props中查找
如果在render下面，信息只有path匹配才会执行这个组件
    render={(URL信息)=>{
        return 组件
    }}

如果在children 下面，不管匹不匹配某个路径都会执行这个组件(甚至可以不用写path)
    children = {(URL信息)=>{
        return 组件
    }}

如果不匹配，url是没有match（值为null）

URL:
    match
    loaction
    history

路由匹配：

    精确匹配：  exact 只找这个路径,后面的路径就不认了
                /index
                /index/aa  后面的就用不了。
            
    模糊匹配：  strict 只认包含这个路径的，包括后面的
                /index/
                /index/aa
                /index  没有后面的/就用不了。

如果要超精确匹配，那么要加 exact strict 。

先写到这里吧，不懂的建议看官网文档，感谢观看，回见。