Come aggiornare il componente ReactJS in base a URL/percorso con React-Router

Question

Come posso aggiornare un componente ReactJS in base a URL/percorso quando si utilizza React-Router?

Il codice seguente funziona, ma è questo il modo corretto per farlo? Sembra un sacco di codice per fare un semplice aggiornamento. Speravo che ci sarebbe stata una chiamata API stateful nel router per occuparsi automaticamente di questo scenario.

var MyHomeView = React.createClass({ 
    componentDidMount: function() { 
     this.props.updateHeader(); 
    }, 

    render: function() { 
     return (
     <div> 
      <h2>Home</h2> 
     </div> 
    ); 
    } 
}); 


var MyAboutView = React.createClass({ 
    componentDidMount: function() { 
     this.props.updateHeader(); 
    }, 

    render: function() { 
    return (
     <div className="my-page-text"> 
     <h2>About</h2> 
     </div> 
    ); 
    } 
}); 


var MyHeader = React.createClass({ 
    mixins: [ CurrentPath ], 

    getInitialState: function() { 
    return { 
     myPath: "about", 
     classes: "ion-ios7-information" 
    }; 
    }, 

    updateHeader: function() {  
     // Classnames refer to www.ionicons.com 
    if (this.getCurrentPath() === "/") { 
     this.setState({myPath: "about" }); 
     this.setState({classes: "ion-ios7-information" }); 
    } else { 
     this.setState({myPath: "/" }); 
     this.setState({classes: "ion-ios7-rewind" }); 
    }  
    }, 

    render: function() { 
    return (
     <Link to={this.state.myPath}> 
      <i className={this.state.classes} /> 
     </Link> 
    ); 
    } 
}); 


var App = React.createClass({ 
    updateHeader: function() { 
     this.refs.header.updateHeader(); 
    }, 

    render: function() { 
     return (
     <div> 
      <MyHeader ref="header" /> 

     <this.props.activeRouteHandler updateHeader={this.updateHeader} /> 
     </div> 
    ); 
    } 
}); 


React.renderComponent((
    <Routes> 
    <Route path="/" handler={App}> 
     <DefaultRoute handler={MyHomeView} /> 
     <Route name="about" handler={MyAboutView} /> 
    </Route> 
    </Routes> 
), document.body); 

Answer 1

Questa domanda è stata aperta un po ', e sembra che ci dovrebbe essere una soluzione più semplice, ma mi prendo una pugnalata e condividere ciò che facciamo nella nostra applicazione.

Stiamo utilizzando l'architettura Flux, che ha la nozione di Negozi che informano i componenti quando il loro stato è aggiornato. In react-router, hanno uno PathStore che si adatta bene a questo modello, poiché quando l'URL lo modifica può quindi notificare componenti che hanno cura e devono essere aggiornati.

Il StoreListener che utilizziamo nella nostra applicazione è disponibile al pubblico qui: https://github.com/odysseyscience/react-flux-suppprt. Avrei dovuto pubblicare su NPM, ma non ancora. Lo farò presto se pensi che sarebbe utile.

Ecco come usiamo il nostro StoreListener per ascoltare le modifiche sul PathStore da react-router, e come lo si dovrebbe utilizzare nel vostro MyHeader:

var StoreListener = require('path/to/StoreListener'); 
var PathStore = require ('react-router/modules/stores/PathStore'); 

var MyHeader = React.createClass({ 
    mixins: [ 
    StoreListener(PathStore) 
    ], 

    getStateFromStores: function() { 
    return { 
     path: PathStore.getCurrentPath() 
    }; 
    }, 

    render: function() { 
    var path = this.state.path; 
    var myPath; 
    var classes; 

    if (this.state.path === "/") { 
     myPath = 'about'; 
     classes = 'ion-ios7-information'; 
    } else { 
     myPath = '/'; 
     classes = 'ion-ios7-rewind'; 
    } 

    return (
     <Link to={myPath}> 
     <i className={classes} /> 
     </Link> 
    ); 
    } 
}); 

Questo inizia con una mixin che dice "mi preoccupo per i cambiamenti al PathStore ". Ogni volta che questo negozio (o qualsiasi negozio viene ascoltato) cambia, getStateFromStores() viene chiamato sul componente per recuperare i dati dal negozio che si desidera disponibile su this.state. Se/Quando i dati cambiano, viene chiamato di nuovo render() e si rilegge this.state e si applicano le modifiche.

Questo è esattamente il nostro modello per l'applicazione di determinate classi CSS "attive" nelle schede di intestazione o in qualsiasi altro punto dell'applicazione che dipende dall'URL corrente.

Si noti che usiamo webpack per raggruppare i nostri moduli CommonJS, quindi potrebbero esserci alcune ipotesi sull'ambiente che può/potrebbe non funzionare per voi.

Non ho risposto a questa domanda un mese fa quando l'ho visto per la prima volta perché ritenevo che ci fosse un modo migliore, ma forse la nostra soluzione può aiutare gli altri con lo stesso problema.

Answer 2

Questo è stato aggiornato se si sta lavorando con il react-router> v11.0.

Si può leggere the details here

TLDR:

// v0.11.x 
var Something = React.createClass({ 
    mixins: [ Router.State ], 
    render: function() { 
     var path = this.getPath(); 
    } 
}); 

Per l'intero State API: https://github.com/rackt/react-router/blob/master/doc/04%20Mixins/State.md

Answer 3

In reagire-router 2.0.0 è possibile utilizzare il hashHistory o browserHistory:

browserHistory.listen(function(ev) { 
    console.log('listen', ev.pathname); 
}); 

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