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