import React from 'react'; import PropTypes from 'prop-types'; import * as reactRedux from 'react-redux'; import BaseContainer from '../../../containers/ReactBaseContainer'; class A extends BaseContainer { constructor(props) { super(props); this.renderCustom = function renderCustom() { return ( <div > Hello world In A </div> ); }; } render() { // 返回父级view return super.render(); } } A.propTypes = { dispatch: PropTypes.func, }; function mapStateToProps(state) { return { state }; } export default reactRedux.connect(mapStateToProps)(A);
3.route.js的源码
import React from 'react'; import { BrowserRouter, Switch, Link } from 'react-router-dom'; import { Route } from 'react-router'; import PostContainer from '../containers/PostsContainer'; // 设置trunk文件的名字 the basename of the resource import aContainer from './containers/A'; import bContainer from './containers/B'; import cContainer from './containers/C'; import Bundle from '../utils/Bundle'; const A = () => ( <Bundle load={aContainer}> {Component => <Component />} </Bundle> ) const app = () => <div> {/* path = "/about" */} {/* "/about/" 可以，但"/about/1"就不可以了 exact 配置之后，需要路径绝对匹配,多个斜杠没有关系，这里直接在浏览器里面设置还有问题*/} {/* path = "/about/" */} {/* "/about/1" 可以，但"/about"就不可以了 用了strict，path要大于等于的关系，少一个斜杠都不行 */} {/* exact 和 strick 都用了就必须一模一样，连斜杠都一样 */} <Link to="/about/"> Link to about</Link> <Route path="https://www.jb51.net/" component={PostContainer} /> <Route path="/about/" component={A} /> {/* <Route path="/home" component={B} /> <Route component={C} /> */} </div> ; export default function () { // 用来判断本地浏览器是否支持刷新 const supportsHistory = 'pushState' in window.history; return ( <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}> <div> {app()} </div> </BrowserRouter> ); }