Router Code in separate Datei reagieren

Question

Ich bin neu zu reactjs und arbeiten zu lernen Redux mit Reagieren Router. Ich möchte Routen als separate Datei haben. Aber irgendwie funktioniert es nicht, weil ich die Abhängigkeiten nicht weitergeben kann. Folgendes ist Codedetails.

Arbeiten index.js Routen, wie gut:

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

Es folgt der Code, den ich versuchte, als separate 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') 
); 

Routen zu spalten. 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; 

Es wird jedoch ein Fehler ausgegeben, da die loadData-Funktion nicht identifiziert werden kann.

Bitte helfen.

Answer 1

Pass es als Kind, beachten Sie die übergeordnete Router genannt wird:

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

Auch Route nicht die Geschichte prop nimmt, Router tut.

Sehen Sie ein Beispiel von Router.js und Route.js auf einem Starter von mir: https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

Nach der von Dominic gegebenen Antwort folgende ich meinen Code wie unten verändern die Abhängigkeit als Funktionsargument passieren, wie ich don‘ t möchten das Speicherobjekt erneut erstellen. Jetzt funktioniert es gut. Folgendes ist ein modifizierter 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;