将道具传递给路由器，使用 redux 和 react-router

Question

I'm trying to set up the router in my app using redux and stateless components.

Here I have my file:

const TodoApp = (props) => {
    return (
        <div>
            {props.children}
            <Footer />
        </div>
    )
};

export default (
    <Route  component={TodoApp}>
        <Route path='/' component={TodoList} />
    </Route>
);

First of all, props.children is not working. I don't know what's wrong in there.

Of course, I have my :

export default (
    <Provider store={store}>
        <Router history={history}>
            {routes}
        </Router>
    </Provider>
)

where {routes} are the routes above. What I'm actually trying to do here is to have a kind of template where the footer (and navbar, or whatever) is always there, and then I change the props.children with whatever is on the route (TodoList in this example.)

Answer 1

Try to export component function instead of instance in routes.jsx

export default () => (
    <Route component={TodoApp}>
        <Route path='/' component={TodoList} />
    </Route>
);

and AppRoot.jsx :

export default () => (
    <Provider store={store}>
        <Router history={history}>
            {routes}
        </Router>
    </Provider>
);

For complete examples take a look here: https://github.com/reactjs/react-router-redux