CODEWITHSUNDEEP
reactjsreduxreact-router
JVilla
JVilla

Reputation: 424

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.)

Upvotes: 2

Views: 481

Answers (1)

savbace
savbace

Reputation: 185

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

Upvotes: 1

Related Questions