2016-03-05 42 views
7

React-Router ist zu einem wirklich schlechten Start ... Was scheint, funktioniert nicht. Mit reagieren-Router 2.0.0 meine Link-Komponente aktualisiert die URL sein/zu, aber meine Seite macht nicht die Über-Komponente danach ...React-Router-Verbindung funktioniert nicht

Einstieg js

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Router = require('react-router').Router; 
var Route = require('react-router').Route; 
var hashHistory = require('react-router').hashHistory; 
var App = require('./components/App.react'); 
var About = require('./components/About'); 

ReactDOM.render(
    <Router history={hashHistory} > 
     <Route path="/" component={App}> 
      <Route path="about" component={About} /> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

App.js

'use strict'; 

var React = require('react'); 
var Link = require('react-router').Link; 
var Header = require('./Header'); 
var UserPanel = require('./UserPanel'); 
var ModelPanel = require('./ModelPanel.react'); 
var EventPanel = require('./event/EventPanel'); 
var VisPanel = require('./vis/VisPanel'); 
var LoginForm = require('./LoginForm'); 
var AppStore = require('../stores/AppStore'); 
var AppStates = require('../constants/AppStates'); 

var App = React.createClass({ 

    [... code omitted ...] 

    render: function() { 
    var viewStateUi = getViewStateUi(this.state.appState); 

    return (
     <div> 
     <Header /> 
     <Link to="/about">About</Link> 
     {viewStateUi} 
     </div> 
    ); 
    } 

}); 

Antwort

9

Da die 'Über' Route ein Kind der 'App' Route ist, müssen Sie this.props.children auf Ihre App-Komponente entweder hinzufügen:

var App = React.createClass({ 

render: function() { 

    var viewStateUi = getViewStateUi(this.state.appState); 

    return (
     <div> 
     <Header /> 
     <Link href="/about">About</Link> 
     {viewStateUi} 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

oder trennen Sie Ihre Routen:

ReactDOM.render(
    <Router history={hashHistory} > 
    <Route path="/" component={App} /> 
    <Route path="/about" component={About} /> 
    </Router>, 
    document.getElementById('app') 
); 
+0

Hmm, also wenn es nicht ein Kind Weg der App wäre dann würde es funktionieren, oder? – Patrick

+0

Richtig! Siehe meine Bearbeitung. –

+0

Super, ich werde heute Abend testen und alle Dokumente lesen - das ist im Nachhinein ziemlich offensichtlich. – Patrick

4

Aus irgendeinem Grund die <Link> s für mich nicht in Betrieb waren unten mit der Konfiguration.

// index.js

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter > 
     <App /> 
    </BrowserRouter> 
    </Provider>, 
    document.getElementById('root') 
); 

// App.js

return (
     <div className="App"> 
     <Route exact={true} path="/:lang" component={Home} /> 
     <Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} /> 
     <Route path="/:lang/play" component={Play} />} /> 
     <Route path="/:lang/end" component={End} /> 
     </div > 
    ); 

Die Home-Komponente hatte den Link, aber Links zum App würde das gleiche tun. Jedes Mal, wenn ich darauf klicke, ändert sich nur die URL, aber die Ansichten bleiben gleich.

konnte ich es Arbeit setzen, wenn ich withRouter zum App.js

export default withRouter(connect(mapStateToProps, { f, g })(App)); 

hinzugefügt noch nicht verstehe ich, was passiert ist. Vielleicht hängt es mit Redux zusammen oder es gibt ein Detail, das mir fehlt.

+2

Sie hatten Recht, es ist mit Redux verwandt, weil ich gerade das gleiche Problem mit MobX hatte. Die Sache ist, dass MobX/Redux die Kontrolle über 'shouldComponentUpdate' übernimmt, so dass die' App' Komponente nicht erneut gerendert wird, da sie nicht den 'Standort' als Prop unterstützt. Weitere Erklärungen finden Sie in der Dokumentation hier: https://github.com/ReactTraining/reac- router/blob/master/packages/reac-router/docs/guides/blocked-updates.md – c4k

Verwandte Themen