React学习笔记二——react-router

      React学习笔记二——react-router无评论

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

首先先来看一下,效果图

下面来看具体代码

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注