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，变成了程序的入口
      

        
          
        

        

      
    );
  };
}

ReactDOM.render(, 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 (
      

        
        
        

          {this.props.children}
        
        
      
    );
  }
}

./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 (

      

      
这里是头部

      

        
首页
        
嵌套的详情页面
        
列表页面
      

      
    )
  }
}

./src/js/components/details.js

import React from 'react';
export default class ComponentDetails extends React.Component{
  render(){
    return (
      

        
这里是嵌套在首页中的详细的页面
      
    );
  };
}

./src/js/components/list.js

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return (
      

        
这里是列表页面
      
    );
  };
}

./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"