react-router的简单使用

 

　　react router是一个基于react之上的强大路由库，可以让你向应用中快速的添加视图和数据流，同时保持页面与url间的同步。

1.安装：　

npm install --save react-router

 2.问题说明：

     刚开始的时候由于没有注意到版本信息，导致出现了一些错误，现在记录如下：

    

  这是我package.js中的版本信息，

  说明1：react-router的2.x版本和4.x版本不兼容，默认下载的4.x的版本，我这里选择的是2.x版本不然会报 “

        typeerror: cannot read property 'location' of undefined”

    说明2：react 16和react-router2.x的版本不兼容，会报“typeerror: cannot read property 'func' of undefined”，我这里讲react降级到了15

 

 3.路由配置：

    （1）路由配置是一组指令，用来告诉router如何匹配url

react.render((
    <router>
        <route path="/" component={app}>
            <route path="about" component={about}>
            <route path="inbox" component={message}>
        </route >
    </router>     
),doucument.body);

　　其中<route>中指定路径path 和 需要显示的组件component相匹配，并且route之间允许嵌套，如上：about组件的路径就是“/about”。

     （2）<indexroute>组件放在可以添加首页效果 ，在还未点击about，或者inbox时，自动显示在页面上，即类似在当请求的的url匹配某个目录时，允许你指定一个类似index.html的入口文件。

reactdom.render(
  <router>
  <route path="/" component={app}>
    <indexroute component={dashboard}/>
    <route path="about" component={about}/>
    <route path="inbox" component={inbox}>
      <route path="message/:id" component={message}/>
    </route>
  </route>
  </router>
  , document.getelementbyid('root'));

显示效果如下：

 

url路径与组件的联系如下：

如果在<route>中将message的路径改为绝对路径，如“/messages/:id”,

则最后一个url与路径的匹配改为：/messages/:id-》app->inbox->message

 

   (3)上面一条的最后我们改了url,这使得旧的url会出现错误界面，这时，我们可以通过<redirect>这个组件使得原来的url也可以正常工作。

reactdom.render(
  <router>
  <route path="/" component={app}>
    <indexroute component={dashboard}/>
    <route path="about" component={about}/>
    <route path="inbox" component={inbox}>
      <route path="/message/:id" component={message}/>
      <redirect from="message/:id" to="/message/:id"/>
    </route>
  </route>
  </router>
  , document.getelementbyid('root'));

 

（4）路由匹配的原理

       三个属性来决定是否匹配一个url:

• 嵌套关系

  嵌套路由被描述成一个树形结构,并且通过深度优先遍历寻找一个与给定url相匹配的路由。

• 路径语法

     路由路径是匹配一个（或一部分）url 的 一个字符模式串。大部分的路由路径都可以直接按照字面量理解，除了几个特殊的符号：

    :paramname – 匹配一段位于 /、? 或 # 之后的 url。 命中的部分将被作为一个参数

    () – 在它内部的内容被认为是可选的

    * – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 url 的末尾，并创建一  个 splat参数

• 优先级

     路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径

 

4.histories

   react router 是建立在 还是history之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 url 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

  （下面介绍一下history）

----------------------------------------分割线---------------------------------

         history是一个javascript库，它允许您在javascript运行的任何地方轻松管理会话历史。history抽象了不同环境中的差异，并提供了一个最小的api，允许您管理历史堆栈、导航、确认导航和会话之间的持久状态。

         history提供三种不同的方法去创建一个history对象，这取决于你的环境

        createbrowserhistory,creatememoryhistory,createhashhistory

        我们主要运用到createbrowserhistory，下面以这个为例子：

 

 const history = createbrowserhistory();
const location = history.location;
    const unlisten = history.listen((location, action) => {
  
  console.log(location);
     });
     history.push("/about",{some:"state"});
     unlisten();

     输出的location对象为：

   

其中的pathname项就是当前url的地址。

有关history更多的信息，可以参考：https://github.com/reacttraining/history

-----------------------------又是一条分割线--------------------------------------------------------

在react router中可以引入browserhistory

import { browserhistory } from 'react-router';

reactdom.render(
  <router history={browserhistory}>
  <route path="/" component={app}>
    <indexroute component={dashboard}/>
    <route path="about" component={about}/>
    <route path="inbox" component={inbox}>
      <route path="/message/:id" component={message}/>
      <redirect from="message/:id" to="/message/:id"/>
    </route>

  </route>
  </router>
  , document.getelementbyid('root'));

这样地址栏的地址会变为：

没有了奇怪的/#/