रिएक्ट-रेडक्स

Question

में रूटिंग समस्याएं मैं सरल अनुप्रयोगों को आजमाकर सीखने के लिए प्रतिक्रिया-रेडक्स पारिस्थितिक तंत्र में नया हूं। इस मामले में मैं कोशिश कर रहा हूं कि प्रतिक्रिया-रेडक्स एप्लिकेशन में रूटिंग कैसे काम करती है। असल में, विचार है:

1. भेजा async कार्रवाई के सफलतापूर्वक पूरा होने पर एक लिंक पर क्लिक करके नेविगेट एक नया पृष्ठ के लिए (एक प्रतिक्रिया रूटर घटक) एक नया पृष्ठ के लिए
2. नेविगेट।

यहाँ मेरी कोड

import React from 'react' 
    import {Link} from 'react-router' 
    import {routerActions} from 'react-router-redux' 
    import {connect} from 'react-redux' 

    class App extends React.Component { 
    render() { 
    // And you have access to the selected fields of the State too! 
    return (
     <div> 
      <header> 
       Links: 
       {' '} 
       <Link to="/">Home</Link> 
       {' '} 
       <Link to="/foo">Foo</Link> 
       {' '} 
       <Link to="/bar">Bar</Link> 
      </header> 
      <div> 
       <button onClick={() => routerActions.push('/foo')}>Go to /foo</button> 
      </div> 
     </div> 
     ) 
     } 
    } 
    export default connect(null, null)(App); 
    =================================================================== 
    import React from 'react' 
    import {connect} from 'react-redux' 
    class Foo extends React.Component { 
    render() { 
    return (
     <div> <h1>I'm Foo</h1> </div> 
     ) 
     } 
    } 
    export default connect(null, null)(Foo); 
    =================================================================== 
    import React from 'react' 
    import {connect} from 'react-redux' 
    class Bar extends React.Component { 
    render() { 
    return (
     <div> <h1>I'm bar</h1> </div> 
     ) 
     } 
    } 
    export default connect(null, null)(Bar); 

    =================================================================== 
    import React from 'react' 
    import ReactDOM from 'react-dom' 
    import {Provider} from 'react-redux' 
    import {Router, Route, browserHistory} from 'react-router' 
    import {syncHistoryWithStore} from 'react-router-redux' 
    import configureStore from './store' 
    import App from './components/test/App'; 
    import Bar from './components/test/Bar'; 
    import Foo from './components/test/Foo'; 
    // Get the store with integrated routing middleware. 
    const store = configureStore() 
    // Sync browser history with the store. 
    const history = syncHistoryWithStore(browserHistory, store) 
    // And use the prepared history in your Router 
    ReactDOM.render(
    <Provider store={store}> 
    <div> 
     <Router history={history}> 
      <Route path="/" component={App}> 
       <Route path="/foo" component={Foo}/> 
       <Route path="/bar" component={Bar}/> 
      </Route> 
     </Router> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
    =================================================================== 

    import {combineReducers,createStore, applyMiddleware} from 'redux' 
    import thunk from 'redux-thunk' 
    import createLogger from 'redux-logger' 
    import userReducer from './reducers/reducer-user'; 
    import {routerMiddleware,routerReducer} from 'react-router-redux' 
    import {browserHistory} from 'react-router' 

    export default function configureStore() { 
    // Create the routing middleware applying it history 
    const browserMiddleware = routerMiddleware(browserHistory); 
    const logger = createLogger(); 
    const reducer = combineReducers({ 
    userState: userReducer, 
    routing: routerReducer 
    }) 
    const store = createStore(reducer,applyMiddleware(thunk,browserMiddleware,logger)); 
return store; 

}

आवेदन ठीक बनाता है और यह अच्छी तरह से आता है, लेकिन जब मैं लिंक पर क्लिक करें, यह काम नहीं करता।
देखें screen shot of the running application
चारों ओर खोजे और विभिन्न पदों को पढ़ा लेकिन मैं रूट समस्या को इंगित नहीं कर सका।

Answer 1

आपका कोड सही लगता है, लेकिन एक साधारण चीज है जो आप गायब हैं: आप अपने राउटर के "बच्चे" को प्रतिपादित नहीं कर रहे हैं! :)

आप देख सकते हैं कि यहाँ:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes#sharing-our-navigation

जब भी आप एक घटक मार्ग (एक आप </Route path="application-path" component={MyComponent} /> का उपयोग कर घोषित), आप जहां यह रखा जाएगा निर्दिष्ट करने की आवश्यकता को रखना चाहते हैं। प्रतिक्रिया-राउटर का उपयोग करके, आप इसे children प्रोप का उपयोग करके निर्दिष्ट करते हैं। फिर, जब भी इस प्रोप को "देखता है" प्रतिक्रिया करता है, तो यह आपके मार्गों को प्रस्तुत करेगा (यह भी घोंसला वाला मार्ग हो सकता है)।

तो, अपने कोड को ठीक करने के लिए, आपके App घटक को this.props.children सही तरीके से संभालने की आवश्यकता है। ऐसा ही कुछ:

class App extends React.Component { 
    /* ... */ 
    render() { 
     return (
      <div> 
       <header>Links go here</header> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

अब, जब आप "/ foo" मार्ग मारा, this.props.childrenFoo घटक से बदल दिया जाएगा।

वैसे, आपके घोंसले वाले मार्ग (अंदर वाले) को "/" होने की आवश्यकता नहीं है, क्योंकि वे "प्रीपेड" होंगे। इस तरह प्रतिक्रिया-राउटर नेस्टेड मार्ग प्रस्तुत करते हैं।

मुझे लगता है कि यह है, इसके साथ शुभकामनाएँ! :)