2016-06-01 19 views
9

Sono nuovo nell'ecosistema React-Redux, sto imparando provando applicazioni semplici. In questo caso sto provando come funziona il routing nell'applicazione react-redux. In sostanza, l'idea è:Problemi di routing in React-Redux

  1. Passare a una nuova pagina facendo clic su un collegamento (un reagiscono-router componente)
  2. Passare a una nuova pagina in caso di superamento di azione asincrona spedito.

Ecco il mio codice

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; 

}

L'applicazione si basa fine e si tratta bene, ma quando clicco sul link, non funziona.
Vedere screen shot of the running application
Ha cercato in giro e leggere vari post ma non sono riuscito a individuare il problema di root.

+0

Penso che questo possa essere un duplicato di: http://stackoverflow.com/questions/35196873/how-to-use-react-router-redux-routeactions/37494808 - essenzialmente sembra che tu debba usare 'this.props.dispatch (routeActions.push ('/ foo));' –

risposta

1

Il tuo codice sembra essere corretto, ma c'è una cosa semplice che ti manca: non stai rendendo il "figlio" del tuo router! :)

È possibile verificare che fuori qui:

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

Ogni volta che si desidera eseguire il rendering di un percorso componente (quella che si dichiara usando </Route path="application-path" component={MyComponent} />), è necessario specificare dove verrà collocato. Usando react-router, lo specifichi usando il prop children. Quindi, ogni volta che React "vede" questo oggetto, renderà i tuoi percorsi (può essere anche un percorso nidificato).

Quindi, per correggere il codice, il tuo componente App deve gestire correttamente this.props.children. Qualcosa del genere:

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

Ora, quando si colpisce percorso "/ foo", this.props.children sarà sostituito da Foo componente.

A proposito, le rotte nidificate (quelle all'interno) non hanno bisogno di "/", poiché saranno "prepended". Questo è il modo in cui react-router esegue i percorsi nidificati.

Penso che sia, buona fortuna! :)