fullstackReact 学习笔记 Routing

一、普通网站访问流程和reactapp项目的区别

（一）普通网站访问的流程

1、浏览器向服务器发送请求返回url对应的页面

2、服务器识别url并从服务器提取相关的数据。

3、服务器将数据加载到html模板上。

4、服务器返回html/css/images等文件

5、浏览器接受相应文件并渲染。

（二）reactapp驱动的网站访问的流程

1、浏览器向服务器发送请求返回url对应的页面

2、服务器不关心url的具体路径，而是返回整个reactapp和所有statics

3、reactapp挂载到html

4、reactapp识别相应的url并提取相应的数据，加载到网页上。

5、网页仅改变加载的相应数据，而不是整个页面重新加载。

通过比较可以看出react app的首次访问并不是很有效率，但是后续的访问将变得非常高效。

（三）切换页面时的操作

1、reactapp更新url并重新渲染页面。

2、react根据url加载相应的component

3、react app向服务器请求数据以便成功加载相应的component

Router的作用就是修改url并且加载对应的component.

有很多的Router库，这里介绍的是React-router

二、React-router的核心组件

修改url：Linik和Redirect.

根据url返回对应的component:Route和Switch

三、自行建造一个react-router

第一步:创建Route

class App extends React.Component {
  render() {
    return (
      <div
        className='ui text container'
      >
        <h2 className='ui dividing header'>
          Which body of water?
        </h2>

        <ul>
          <li>
            <a href='/atlantic'>
              <code>/atlantic</code>
            </a>
          </li>
          <li>
            <a href='/pacific'>
              <code>/pacific</code>
            </a>
          </li>
        </ul>

        <hr />


      </div>
    );
  }
}

const Atlantic = () => (
  <div>
    <h3>Atlantic Ocean</h3>
    <p>
      The Atlantic Ocean covers approximately 1/5th of the
      surface of the earth.
    </p>
  </div>
);

const Pacific = () => (
  <div>
    <h3>Pacific Ocean</h3>
    <p>
      Ferdinand Magellan, a Portuguese explorer, named the ocean
      'mar pacifico' in 1521, which means peaceful sea.
    </p>
  </div>
);