yönlendirici kodunu ayrı bir dosyaya dönüştürür

Question

Reaksiyona yeni başlıyorum ve tepki yönlendiricisi ile redux öğrenmek için çalışıyorum. Rotaları ayrı bir dosya olarak istiyorum. Ancak bir şekilde çalışmıyor çünkü bağımlılıkları geçemiyorum. Aşağıdaki kod ayrıntıları. yanı yollara sahip olmanın

Çalışma 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') 
); 

ardından Ayrı routes.js olarak

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

yolları bölmek çalıştı koddur. 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; 

Ancak, loadData işlevini tanımlayamadığı için hata atıyor.

Lütfen

Yardım edin. Bir çocuk olarak

Answer 1

Geçiş bunu, ebeveyn dikkat Router denir:

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

Ayrıca Route tarih pervane almaz, Router yapar. Ben don' olarak işlev argüman olarak bağımlılık geçmesine aşağıdaki gibi kodumu değiştirdi Dominic tarafından verilen cevabı izledikten sonra https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

:

benim bir marş üzerinde Router.js ve Route.js örneği görün Mağaza nesnesini tekrar oluşturmak istiyorum. Şimdi iyi çalışıyor. Değiştirilen kod aşağıdadır.

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;