欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react-router的简单使用

程序员文章站 2022-07-05 17:43:05
React Router是一个基于React之上的强大路由库,可以让你向应用中快速的添加视图和数据流,同时保持页面与URL间的同步。 1.安装: 2.问题说明: 刚开始的时候由于没有注意到版本信息,导致出现了一些错误,现在记录如下: 这是我package.js中的版本信息, 说明1:react-ro ......

 

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

1.安装: 

npm install --save react-router

 2.问题说明:

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

    react-router的简单使用

  这是我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'));

显示效果如下:

  react-router的简单使用

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

react-router的简单使用

如果在<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对象为:

   react-router的简单使用

其中的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'));

这样地址栏的地址会变为:react-router的简单使用

没有了奇怪的/#/