react基础（2）

来源：互联网发布：环绕音乐制作软件编辑：程序博客网时间：2024/06/05 20:17

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'));

从上面的效果图中，可以看到，有“欢迎你！”这个类似首页的东西。

IndexRoute默认路由，当path=“/”时，默认显示Home组件。IndexRoute也是从react-router里引出的。

阅读全文

0 0