网上查了很多资料,都没有可以直接拿来用的,大多数是因为版本差异造成的。有时代码看起来没什么两样,偏偏不成功,有的函数这个版本没有,有的需要用另一种方式编写,过程中充满了各种不确定性。当准备放弃的时候居然发现配置成功了。
1.webpack.config.js
入口文件是hash-route.js(采用commonjs规范编写),通过webpack编译最后导出bundle.js(浏览器能识别的js),为了支持es6语法和采用类继承的方式写react 组件,在js的loader加载器后面添加了查询语句,
es2015是支持es6特性的,react 支持 class extends React.Component{}的写法,不过这个例子中么有采用。
var webpack = require('webpack');
var path=require('path');
var __dirname='./myComponents/build/';
var babelSettings = { presets: ['es2015', 'react'] };
module.exports = {
entry:['./myComponents/js/hash-route.js'],
output: {
path: __dirname,
filename: 'bundle.js'
},
resolve: {
extensions: ['','.js','.jsx','.css'],
root: '/node_modules'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel?'+JSON.stringify(babelSettings), // loaders can take parameters as a querystring
exclude: /node_modules/
}
],
plugins: [
//允许错误不打断程序
new webpack.NoErrorsPlugin()
]
}
};
2.入口文件
关键部分是history的创建方式,浏览器提示我用 import { hashHistory } from 'react-router',不过没有什么卵用。home about inbox 组件最后都要在App这个组件中预定义的<RouteHandler/>位置呈现
'use strict';
import React from "react";
import ReactDOM from "react-dom";
import {Router,Route,IndexRoute} from 'react-router';
import {createHistory,createHashHistory,useBasename} from 'history';
var App = require('./app');
var About = require('./About');
var Inbox = require('./Inbox');
var Home = require('./Home');
// declare our routes and their hierarchy
//https://zhuanlan.zhihu.com/p/20381597
const history = useBasename(createHashHistory)({
queryKey: '_key',
basename: '/',
});
var routes = (
<Route handler={App} path="/">
<Route path="home" component={Home}/>
<Route path="about" component={About}/>
<Route path="inbox" component={Inbox}/>
<IndexRoute component={Home} />
</Route>
);
ReactDOM.render(<Router history={history}>{routes}</Router>, document.querySelector('#app'))
3.app.js
var React = require('react');
import {Router} from 'react-router';
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
render () {
return (
<div>
<h1>App</h1>
<RouteHandler/>
</div>
)
}
});
module.exports = App;
4.inbox(home,about省略)
import React from "react";
var Inbox = React.createClass({
render: function () {
return <h2>Inbox</h2>;
}
});
module.exports = Inbox;
5.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack react-router</title>
</head>
<body>
菜单:
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#inbox">inbox</a>
<div id='app'></div>
<script src="build/bundle.js"></script>
</body>
</html>