reagire codice router in file separati

Question

Sono nuovo a reactjs e lavoro per imparare il redux con il router di risposta. Voglio avere percorsi come file separato. Comunque in qualche modo non funziona perché non sono in grado di passare le dipendenze. Di seguito sono riportati i dettagli del codice.

index.js lavoro avente percorsi così:

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') 
); 

seguito è il codice che ho cercato di dividere come routes.js separati

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') 
); 

rotte. 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; 

Tuttavia, l'errore di lancio non è in grado di identificare la funzione loadData.

Per favore aiuto.

Answer 1

passarla come un bambino, si noti il ​​genitore è chiamato Router:

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

anche Route non prende il puntello storia, Router fa.

vedere un esempio di Router.js e Route.js su un antipasto di mine: https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

Dopo aver seguito la risposta data da Dominic ho cambiato il mio codice come di seguito per passare la dipendenza come la funzione argomento come I don' t voglio creare nuovamente l'oggetto negozio. Ora funziona bene. Di seguito è riportato il codice modificato.

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;