React学习笔记二——react-router

原创
2016/04/28 19:21
阅读数 1.6K

今天写了一个关于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

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


展开阅读全文
打赏
1
12 收藏
分享
加载中
更多评论
打赏
0 评论
12 收藏
1
分享
返回顶部
顶部