Pass props down in Redux React app with React Router

Question

Here's 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 to be pretty standard from what I can gather. However, I'm a little confused about how I get props down from App to, for example, the Dashboard component. Here's the App component:

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 isn't a little more concise, but I'm specifically trying to pass the authState (from my Reducer) down to the Dashboard component, and I'm a little confused about how that works with React Router and redux-simple-router libs...

EDIT:

I changed the Dashboard component to include this 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 I can now access the Redux state and actions. I'm not sure if this is the right way, but it works for now...

Answer 1

Using react-router v1+ you can access props on your deepest current route with: this.props.route .

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

In your dashboard component:

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

To access all the routes in your current route tree you can traverse this.props.routes (deepest route is last).