React router 配置demo

网上查了很多资料，都没有可以直接拿来用的，大多数是因为版本差异造成的。有时代码看起来没什么两样，偏偏不成功，有的函数这个版本没有，有的需要用另一种方式编写，过程中充满了各种不确定性。当准备放弃的时候居然发现配置成功了。

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>

React router 配置demo

猜你喜欢