JVilla JVilla - 1 month ago 12
React JSX Question

Passing props to router, using redux and react-router

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

Here I have my routes.jsx 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 AppRoot.jsx:

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

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

Comments