Transfer of parameters to react-router component



  • Using the library react-router for navigation in SPA at React. The application itself has a view:

    application.jsx

    import React from 'react';
    import { Router, Route, browserHistory } from 'react-router';
    import Home from './home.jsx';
    

    export default React.createClass({
    render() {
    // Объект пользователя. Здесь не важно, откуда именно он берется.
    const user = {name: 'FooBarBaz'};

        return (
            <Router history={browserHistory}>
                <Route path="/" component={Home} />
            </Router>
        );
    }
    

    });

    home.jsx

    import React from 'react';

    export default React.createClass({
    render() {
    return (<div>You are {this.props.user.name}</div>);
    }
    });

    The question is how. I'll give you a break. User &apos; s objectuser(a) component Home?


    Used react-router@2.4.1 and react@15.1.0



  • The react allows the use of clean functions as components. It gives you the opportunity. I'. component Home by adding any properties there.

    The annex code may look, for example:

    import React from 'react';
    import { Router, Route, browserHistory } from 'react-router';
    import Home from './home.jsx';
    

    export default React.createClass({
    render() {
    const user = {name: 'FooBarBaz'};

        // Это всего лишь обертка для компонента Home, позволяющая передавать
        // дополнительные параметры через замыкание.
        const WrappedHome = function(props) {
            // Конструкция "{...props}" нужна, чтобы не потерять
            // параметры, переданные от компонента Route
            return (&lt;Home {...props} user={user} /&gt;);
        };
    
        // Обратите внимание на замену "Home" на "WrappedHome" в параметре
        // "component".
        return (
            &lt;Router history={browserHistory}&gt;
                &lt;Route path="/" component={WrappedHome} /&gt;
            &lt;/Router&gt;
        );
    }
    

    });




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2