Edit router code in a separate file

Question

I am new to reaction and working to find out the reduction using a react router. I want the routes to be separate files. However, somehow it does not work, because I can not pass the dependencies. Below are the code details.

Working .js index having routes:

import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import {ReduxRouter} from "redux-react-router"; import {Route} from "react-router" import createBrowserHistory from "history/lib/createBrowserHistory" import configureStore from './store'; import App from "./containers/App"; import Home from "./components/Home"; import Countries from "./components/Countries"; import {fetchData} from './actions/actions'; const history = new createBrowserHistory(); const store = configureStore(); function loadData() { store.dispatch(fetchData('https://restcountries.eu/rest/v1/all')) } ReactDOM.render( <Provider store={store}> <ReduxRouter> <Route history={history}> <Route component={App}> <Route path='/' component={Home} /> <Route path='/countries' component={Countries} onEnter={loadData} /> </Route> </Route> </ReduxRouter> </Provider>, document.getElementById('root') ); 

Below is the code that I tried to break as a separate route.js

index.js

 import 'babel-core/polyfill'; import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import {ReduxRouter} from "redux-react-router"; import {Route} from "react-router" import createBrowserHistory from "history/lib/createBrowserHistory" import configureStore from './store'; import routes from "./routes"; import {fetchData} from './actions/actions'; const history = new createBrowserHistory(); const store = configureStore(); ReactDOM.render( <Provider store={store}> <ReduxRouter> <Route history={history} routes={routes}> </Route> </ReduxRouter> </Provider>, document.getElementById('root') ); 

routes.js

 import React from "react"; import { Provider } from 'react-redux'; import {ReduxRouter} from "redux-react-router"; import {Route} from "react-router" import App from "./../containers/App"; import Home from "./../components/Home"; import Countries from "./../components/Countries"; const router = <Route history={history}> <Route component={App}> <Route path='/' component={Home} /> <Route path='/countries' component={Countries} onEnter={loadData} /> </Route> </Route>; export default router; 

However, it throws an error as being unable to identify the loadData function.

Please, help.

Answer 1

Pass it as a child, note that the parent call is called Router :

 <Router history={history}> {routes} </Router> 

Also Route does not take prop history, Router does.

See an example of Router.js and Route.js at my start: https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

After the answer provided by Dominic, I modified my code as shown below to pass the dependency argument as a function argument, since I don't want to create the repository object again. Now it works fine. The following is a modified code.

index.js

 import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import {ReduxRouter} from "redux-react-router"; import {Route} from "react-router" import createBrowserHistory from "history/lib/createBrowserHistory" import configureStore from './store'; import App from "./containers/App"; import Home from "./components/Home"; import Countries from "./components/Countries"; import {fetchData} from './actions/actions'; import routes from "./routes"; const history = new createBrowserHistory(); const store = configureStore(); function loadData() { store.dispatch(fetchData('https://restcountries.eu/rest/v1/all')) } ReactDOM.render( <Provider store={store}> <ReduxRouter> <Route history={history}> {routes(loadData)} </Route> </ReduxRouter> </Provider>, document.getElementById('root') ); 

routes.js

 import React from "react"; import { Provider } from 'react-redux'; import {ReduxRouter} from "redux-react-router"; import {Route} from "react-router" import App from "./../containers/App"; import Home from "./../components/Home"; import Countries from "./../components/Countries"; function router(loadData) { return (<Route component={App}> <Route path='/' component={Home} /> <Route path='/countries' component={Countries} onEnter={loadData} /> </Route>); } export default router;