ルータコードを別ファイルで反応させてください

Question

私はreactjsを初めて使用しており、反応ルータを使って還元反応を学んでいます。私は別々のファイルとしてルートを持っていたい。しかし、どういうわけか、私は依存関係を渡すことができないので、動作しません。以下はコードの詳細です。同様にルートを有する

作業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'; 

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

後、私は別routes.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') 
); 

ルートを分割しようとしたコードです。 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; 

しかし、loadData関数を識別できないため、エラーがスローされています。

助けてください。子として

Answer 1

パスを、親がRouterと呼ばれている点に注意してください。

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

またRouteRouterはない、歴史の小道具を取りません。

鉱山のスターターにRouter.jsとRoute.jsの例を参照してください：https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

ドミニクによって与えられた答えを以下の後、私は「私はドンとして関数の引数としての依存関係を渡すために、以下のように私のコードを変更ストアオブジェクトを再度作成したい。今はうまく動作します。以下は変更されたコードです。

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;