react-router的简单使用

2018-12-03 09:26:25来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

  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'));

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

没有了奇怪的/#/

 

 

 

 

              

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS节流和防抖

下一篇:上传文件进度条(笔记)