अलग फ़ाइल

Question

में प्रतिक्रिया राउटर कोड मैं प्रतिक्रियाओं के लिए नया हूं और प्रतिक्रिया राउटर के साथ रेडक्स सीखने के लिए काम कर रहा हूं। मैं अलग फाइल के रूप में मार्ग बनाना चाहता हूँ। हालांकि किसी भी तरह से यह काम नहीं कर रहा है क्योंकि मैं निर्भरताओं को पारित करने में सक्षम नहीं हूं। कोड विवरण निम्नलिखित है।

कार्य मार्गों होने के रूप में अच्छी तरह से 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') 
); 

मार्गों की कोशिश की है। जेएस

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; 

हालांकि यह लोड फेंटा फ़ंक्शन की पहचान करने में सक्षम नहीं है क्योंकि यह त्रुटि फेंक रहा है।

कृपया मदद करें। एक बच्चे के रूप

Answer 1

पास यह, माता पिता ध्यान दें Router कहा जाता है:

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

इसके अलावा Route इतिहास प्रोप नहीं ले करता है, Router करता है।

Router.js और Route.js का एक उदाहरण देखें मेरा एक स्टार्टर पर: https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

जवाब डोमिनिक द्वारा दिए गए पालन करने के बाद मैं समारोह तर्क के रूप में मैं डॉन 'के रूप में पारित करने के लिए निर्भरता मेरी कोड बदल के रूप में नीचे टी फिर से स्टोर ऑब्जेक्ट बनाना चाहता हूँ। अब यह ठीक काम कर रहा है। निम्नलिखित संशोधित कोड है।

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;