Routing-Probleme in React-Redux

Question

Ich bin neu in der React-Redux-Ökosystem, Lernen durch einfaches Ausprobieren von Anwendungen. In diesem Fall probiere ich aus, wie Routing in der react-redux-Anwendung funktioniert. Grundsätzlich ist die Idee:

1. Navigieren Sie zu einer neuen Seite durch Klicken auf einen Link (a reagiert-Router Komponente)
2. Navigieren Sie zu einer neuen Seite nach dem erfolgreichen Abschluss der abgefertigten Asynchron-Aktion.

Hier ist mein Code

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; 

}

Die Anwendung baut fein und es kommt gut, aber wenn ich auf den Link klicken, funktioniert es nicht.
Siehe screen shot of the running application
Gesucht und lesen Sie verschiedene Beiträge, aber ich konnte das Grundproblem nicht lokalisieren.

Answer 1

Ihr Code scheint korrekt zu sein, aber es gibt eine einfache Sache, die Sie vermissen: Sie werden nicht das "Kind" Ihres Routers rendern! :)

Sie können das hier ansehen:

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

Jedes Mal, wenn Sie eine Komponente Route machen möchten (die Sie </Route path="application-path" component={MyComponent} /> erklärt verwenden), müssen Sie angeben, wo es platziert wird. Mit react-router geben Sie dies unter Verwendung der children Prop. An. Wenn "Reagieren" dann diese Requisite "sieht", werden die Routen angezeigt (es kann auch eine verschachtelte Route sein).

Also, um Ihren Code zu beheben, muss Ihre App Komponente this.props.children korrekt behandeln. So etwas Ähnliches:

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

Wenn Sie jetzt "/ foo" Route treffen, this.props.children wird durch Foo Komponente ersetzt werden.

Übrigens brauchen Ihre verschachtelten Routen (die innen) nicht "/", da sie "vorangestellt" werden. Dies ist der Weg, wie reac-router verschachtelte Routen darstellt.

Ich denke, das ist es, viel Glück damit! :)