Transfer details in a Redux React app using React Router

Question

Here is my entry point file:

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router, Route } from 'react-router'
import { syncReduxAndRouter, routeReducer } from 'redux-simple-router'
import reducers from './reducers'

import App from './containers/app.jsx'
import About from './about.jsx'
import Dashboard from './dashboard/index.jsx'

const reducer = combineReducers(Object.assign({}, reducers, {
    routing: routeReducer
}))
const store = createStore(reducer)
const history = createBrowserHistory()

syncReduxAndRouter(history, store)

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    { path: 'about', component: About },
    { path: 'dashboard', component: Dashboard }
  ]
}

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} history={history} />
    </Provider>,
    document.getElementById('app')
)

Which seems pretty standard from what I can put together. However, I'm a little confused about how I get the details from Appto, for example, a component Dashboard. Here's the component App:

import React, {PropTypes} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {Link} from 'react-router'

import * as authActions from './../actions/auth'

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/dashboard">Dashboard</Link>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

App.propTypes = {
    authActions: PropTypes.object.isRequired,
    authState: PropTypes.object.isRequired
}

function mapStateToProps(state) {
    return {authState: state.authState}
}

function mapDispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Sorry, the code is not a bit more concise, but I'm specifically trying to pass authState(from my reducer) to the component Dashboard, and I'm a little confused about how this works with React Router and redux-simple-routerlibs ...

EDIT:

I changed the component Dashboardby including it at the bottom:

Dashboard.propTypes = {
    authActions: PropTypes.object.isRequired,
    authState: PropTypes.object.isRequired
}

function mapStateToProps(state) {
    return {authState: state.authState}
}

function mapDispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

And now I can access the status and actions of Redux. I'm not sure if this is the right way, but it works now ...

Answer 1

response-router v1 +, this.props.route.

<Route path='/' component={App}>
        <IndexRoute component={Home} />
        <Route path='about' component={About} />
        <Route path='dashboard' component={Dashboard} customprop="Hello, it me" />
        <Route path="*" component={NoMatch} />
</Route>

:

this.props.route.customprop = > "Hello, it me"

, this.props.routes ( ).