React Router 路由

React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记

react-router GitHub

React-Router 安装

npm install --save react-router

Router 绑定

./src/js/root.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list';
import ComponentDetails from './components/details';
import {Router,Route,hashHistory} from 'react-router';

export default class Root extends React.Component{
  render(){
    return (
      //这里替换了之前的 Index，变成了程序的入口
      <Router history={hashHistory}>

        <Route component={Index} path="/">
          <Route component={ComponentDetails} path="details"></Route>
        </Route>

        <Route component={ComponentList} path="list"></Route>

      </Router>
    );
  };
}

ReactDOM.render(<Root/>, document.getElementById('example'));

./src/js/index.js

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';

import 'antd/dist/antd.css';

export default class Index extends React.Component {

  componentWillMount(){
    //定义你的逻辑即可
    console.log("Index - componentWillMount");
  }

  componentDidMount(){
    console.log("Index - componentDidMount");
  }

  render() {
    return (
      <div>
        <ComponentHeader/>
        <BodyIndex userid={999} username={"Parry1"}/>
        <div>
          {this.props.children}
        </div>
        <ComponentFooter/>
      </div>
    );
  }
}

./src/js/components/header.js

import React from 'react';
import {Link} from 'react-router';
export default class ComponentHeader extends React.Component {
  constructor(){
    super();
    this.state ={
      miniHeader: false //默认加载的时候还是高（不是 mini）的头部
    };
  };

  switchHeader(){
    this.setState({
      miniHeader: !this.state.miniHeader
    });
  };

  render() {
    const styleComponentHeader = {
      header: {
        backgroundColor: "#333333",
        color: "#FFFFFF",
        "paddingTop": (this.state.miniHeader) ? "3px" : "15px",
        paddingBottom: (this.state.miniHeader) ? "3px" : "15px"
      },
      //还可以定义其他的样式
    };
    return (

      <header style={styleComponentHeader.header} class="smallFontSize">
      <h1>这里是头部</h1>

      <ul>
        <li><Link to={`/`}>首页</Link></li>
        <li><Link to={`/details`}>嵌套的详情页面</Link></li>
        <li><Link to={`/list`}>列表页面</Link></li>
      </ul>

      </header>
    )
  }
}

./src/js/components/details.js

import React from 'react';
export default class ComponentDetails extends React.Component{
  render(){
    return (
      <div>
        <h2>这里是嵌套在首页中的详细的页面</h2>
      </div>
    );
  };
}

./src/js/components/list.js

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return (
      <div>
        <h2>这里是列表页面</h2>
      </div>
    );
  };
}

./webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,

  // 修改为从 root.js 进入
  entry: "./src/js/root.js",

  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
          plugins: ['react-html-attrs'], //添加组件的插件配置
        }
      },
      //下面是使用 ant-design 的配置文件
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

底层机制

• React : state/props -> components -> UI

• Router : location -> router -> UI

Router 参数传递

• 定义方法:

  path="list/:id"