文档章节

React学习笔记二——react-router

刘梓航
 刘梓航
发布于 2016/04/28 19:21
字数 550
阅读 716
收藏 12

今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些。

首先先来看一下,效果图

下面来看具体代码

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="common/react.min.js"></script>
    <script src="common/react-dom.js"></script>
    <script src="common/browser.min.js"></script> //浏览器解析jsx用的的js
    <script src="common/ReactRouter.min.js"></script> 
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
    </div>
</body>
<script src="component/index.jsx" type="text/babel"></script> 
</html>

index.jsx

var Router = ReactRouter.Router;
var Route = ReactRouter.Route; 
var Link = ReactRouter.Link; 
var IndexRoute = ReactRouter.IndexRoute;
var browserHistory = ReactRouter.browserHistory;


/**
 * 标题
 */
var Header = React.createClass({
  render: function() {
    return (
       <header>
            <p>标题</p>
        </header>
    );
  }
});

/**
 * 结尾
 */
var Footer = React.createClass({
  render: function() {
    return (
       <footer>
            <p>结尾</p>
        </footer>
    );
  }
});

/**
 * 列表
 */
var Navlist = React.createClass({  
  render: function() {
    return (
       <section>
            <nav>
                <Link to="/list">列表一</Link>
                <Link to="/about">列表二</Link> 
            </nav>
        </section>
    );
  }
});

/**
 * 列表一
 */
var List = React.createClass({
  render: function() {
    return (
      <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            </ul>
    );
  }
});

var About = React.createClass({
  render: function() {
    return (
        <ul>
           第二列
        </ul>
    );
  }
});

// 应用入口
var App = React.createClass({
 render() {
    return (
        <div>
       <Header/>
       <Navlist/>
        {this.props.children}
       <Footer/>
        </div>
    )
  }
});


// 定义页面上的路由
ReactDOM.render(
     <Router  history={browserHistory}>
         <Route path="/" component={App}>
              <IndexRoute component={List} /> //默认加载
          <Route path="list" component={List}/>
          <Route path="about" component={About}/>
        </Route>
  </Router>,
    document.getElementById('app')
);


history 配置

React Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。

  • createHashHistory

  • createBrowserHistory

  • createMemoryHistory

这三个有什么区别呢:

createHashHistory

这是一个你会获取到的默认 history ,如果你不指定某个 history 。它用到的是 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。这个 支持 ie8+ 的浏览器,但是因为是 hash 值,所以不推荐使用。

createBrowserHistory

Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL,新建一个像这样真实的 URL example.com/some/path。

Memoryhistory

不会在地址栏被操作或读取。


© 著作权归作者所有

刘梓航
粉丝 12
博文 57
码字总数 11448
作品 0
天津
程序员
私信 提问
从零开始搭建React应用(二)——React应用架构

上一篇文章——从零开始搭建 React 应用(一)——基础搭建讲述了如何使用 webpack 搭建一个非常基础的 react 开发环境。本文将详细讲述搭建一个 React 应用的架构。 仓库地址:github.com/...

Mello_Z
2018/07/17
0
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
2018/05/27
0
0
redux中间件的原理——从懵逼到恍然大悟

前言 react已经出来很久了,其生态圈之庞大,一锅炖不下!各种react-xx,已让我们不堪重负,github上随便一个demo,引入的模块至少都是五指之数+。看着头疼,嚼之无味……。 在此建议新学者,...

钱天兵
2017/11/28
0
0
简易实现react-router v4(上)

写在前面 用react-router v4可以实现单页面应用,可以将组件映射到路由上,将对应的组件渲染到想要渲染的位置。 react路由有两种方式:一种是HashRouter,即利用hash实现路由切换。另一种是B...

慕晨同学
01/13
0
0
ReactJS 关键知识点汇总

React 组件之间 事件调用(父组件调用子组件)(http://blog.csdn.net/chenyongtu110/article/details/49613967) 2.ReactJS学习笔记(三)-父子组件间的通信(http://blog.csdn.net/yf275908654/a...

IT追寻者
2017/10/23
8
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
63
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
57
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部