react基础（2）

最新推荐文章于 2024-11-10 15:10:09 发布

dmwdm9650

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量124

点赞数

文章标签： javascript json webpack ViewUI

原文链接：http://www.cnblogs.com/sakurayeah/p/6041561.html

版权

react基础（1）：介绍了如何创建项目，总结了JSX、组件、样式、事件、state、props、refs、map循环，另外还讲了mock数据和ajax

还是用 react基础1 里创建的项目继续写案例。

react-router

在做单页面应用的时候就需要用到路由了。

首先来看一下我们的项目目录，如下所示：

package.json和webpack.config.js的内容和 react基础（1）一样的。

下面贴一下entries里的文件内容

react2/src/entries/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>

<div id="root"></div>

<script src="common.js"></script>
<script src="index.js"></script>

</body>
</html>

react2/src/entries/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render(){
    return(
      <div>123</div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

安装依赖 npm i

启动本地服务 npm start

浏览器打开浏览效果 http://localhost:8989/

效果如下

案例1

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';

class App extends Component {
  render(){
    return(
      <div>
          <ul>
              <li><Link to="/movie">电影</Link></li>
              <li><Link to="/tv">电视剧</Link></li>
          </ul>
          {this.props.children}
      </div>
    )
  }
}

class Tv extends Component {
  render(){
    return(
      <div>
          <ul>
              <li>还珠格格</li>
              <li>来自星星的你</li>
          </ul>
      </div>
    )
  }
}

class Movie extends Component {
  render(){
    return(
      <div>
          <ul>
              <li>暮光之城</li>
              <li>喜剧之王</li>
          </ul>
      </div>
    )
  }
}

const Routes = ({ history }) =>
  <Router history={history}>
    <Route path="/" component={App}>
       <Route path="/tv" component={Tv} />
       <Route path="/movie" component={Movie} />
    </Route>
  </Router>;

Routes.propTypes = {
  history: PropTypes.any,
};

ReactDOM.render(
    <Routes history={hashHistory} />, 
    document.getElementById('root')
);

Router、Route、Link这三个大家可以看一下教程了解一下定义，这里不详细讲解：教程戳这里

关于history的教程戳这里。常用的History有三种：browserHistory、hashHistory、createMemoryHistory（从react-router引出）。在声明路由的时候需要指定所选的方式，没有默认选项。

使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis

使用browserHistory,浏览器的url是这样的：/user/liuna （大家可以自己试试这种，这里就不写案例了）

这个案例写出来的效果类似tab切换

案例2：

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';

class App extends Component {
  render(){
    return(
      <div>
          <ul>
              <li><Link to="/movie">电影</Link></li>
              <li><Link to="/tv">电视剧</Link></li>
          </ul>
          {this.props.children}
      </div>
    )
  }
}

class Tv extends Component {
  render(){
    return(
      <div>
        <Link to="/">返回</Link> 
          <ul>
              <li>还珠格格</li>
              <li>来自星星的你</li>
          </ul>
      </div>
    )
  }
}

class Movie extends Component {
  render(){
    return(
      <div>
        <Link to="/">返回</Link>
          <ul>
              <li>暮光之城</li>
              <li>喜剧之王</li>
          </ul>
      </div>
    )
  }
}


const Routes = ({ history }) =>
  <Router history={history}>
    <Route path="/" component={App} />
    <Route path="/tv" component={Tv} />
    <Route path="/movie" component={Movie} />
  </Router>;

Routes.propTypes = {
  history: PropTypes.any,
};

ReactDOM.render(
    <Routes history={hashHistory} />, 
    document.getElementById('root')
);

这个效果就相当于是直接跳转了页面，和案例1的tab切换效果不一样的主要代码，如下所示

案例1里面component为Tv和Movie的Route标签是写在component为App的Route标签里的，而案例2里相当于是同级的。

案例3

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

class App extends Component {
  render(){
    return(
      <div>
          <p>
              <span><Link to="/movie">电影</Link></span>&nbsp;&nbsp;
              <span><Link to="/tv">电视剧</Link></span>
          </p>
          {this.props.children}
      </div>
    )
  }
}

class Home extends Component {
  render(){
    return(
      <div>欢迎你！</div>
    )
  }
}

class Tv extends Component {
  render(){
    return(
      <div>
        <Link to="/">返回</Link> 
          <ul>
              <li>还珠格格</li>
              <li>来自星星的你</li>
          </ul>
      </div>
    )
  }
}

class Movie extends Component {
  render(){
    return(
      <div>
        <Link to="/">返回</Link> 
          <ul>
              <li>暮光之城</li>
              <li>喜剧之王</li>
          </ul>
      </div>
    )
  }
}

const Routes = ({ history }) =>
  <Router history={history}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/tv" component={Tv} />
      <Route path="/movie" component={Movie} />
    </Route>
  </Router>;

Routes.propTypes = {
  history: PropTypes.any,
};

ReactDOM.render(
    <Routes history={hashHistory} />, 
    document.getElementById('root')
);