React学习笔记二——react-router

时间 2019-11-10

标签 react 学习笔记 router 栏目 React 繁體版

原文原文链接

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

首先先来看一下，效果图

html

下面来看具体代码react

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.jsxbabel

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。react-router

createHashHistoryapp
createBrowserHistorydom
createMemoryHistorythis

这三个有什么区别呢：

createHashHistory

这是一个你会获取到的默认 history ，若是你不指定某个 history 。它用到的是 URL 中的 hash（#）部分去建立形如 example.com/#/some/path 的路由。这个支持 ie8＋的浏览器，可是由于是 hash 值，因此不推荐使用。spa

createBrowserHistory

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

Memoryhistory

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