redux-simple-router-sample

Layout.jsx

import React from 'react'
import { Link } from 'react-router'

export default class Layout extends React.Component {
  render () {
    return (
      <div>
        I'm Layout.
        <div>
          <Link to='/user'> User </Link>
        </div>
        <div>
          <Link to='/about'> About </Link>
        </div>
        <div>
          {this.props.children}
        </div>
      </div>
    )
  }
}

main.js

// This is the entry file.
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { routes } from 'routes'
import configureStore from 'redux/configureStore'

const store = configureStore()

class Root extends React.Component {
  render () {
    return (
      <Provider store={store}>
        {routes}
      </Provider>
    )
  }
}

const rootElement = document.getElementById('root')

ReactDOM.render(<Root />, rootElement)

package.json

{
  "name": "babel6-webpack-react",
  "version": "1.0.0",
  "description": "babel 6, webpack and react boilerplate",
  "main": "src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js",
    "start": "webpack --watch --config webpack.config.js"
  },
  "keywords": [
    "babel6"
  ],
  "author": "chenly",
  "license": "ISC",
  "dependencies": {
    "history": "^2.0.0-rc2",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-redux": "^4.0.6",
    "react-router": "^2.0.0-rc5",
    "redux": "^3.0.5",
    "redux-simple-router": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "express": "^4.13.3",
    "webpack": "^1.12.11",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

routes.js

import React from 'react'
import { Router, Route, useRouterHistory } from 'react-router'
import { createHistory } from 'history'
import { syncHistory } from 'redux-simple-router'

import Layout from 'views/Layout'
import User from 'views/User'
import About from 'views/About'

const basename = 'test'

const history = useRouterHistory(createHistory)({
  basename
})

export const routerMiddleware = syncHistory(history)

export const routes = (
  <Router history={history}>
    <Route path='/' component={Layout}>
      <Route path='/user' component={User}/>
      <Route path='/about' component={About}/>
    </Route>
  </Router>
)