Geek Answers Handbook

Change components based on URL using a router

This is more of an architectural question regarding a reaction than a specific problem, but what is considered best practice for managing state / props with layout layout and several child components that are displayed based on URL?

Note. I know that similar questions have been asked, but that’s a little different. [ How to update ReactJS component based on URL / path using React-Router

Suppose I have something like the following code: Profile page (basic layout view) with links to links for profiles (settings, settings, account information, etc.) and the main panel in which each of the subcategories section is displayed.

So, for now, I will have something like this: my routes.js router 

<Router history={browserHistory}>
  <Route path='/profile' component={Profile} >
    <IndexRoute component={Summary} />
    <Route path='/profile/settings' component={Settings} />
    <Route path='/profile/account' component={Account} />
    <Route path='/profile/preferences' component={Preferences} />
  </Route>
</Router>

and truncated version of the profile layout component profile.js

class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

    return(
      <div className='container profile-page'>
        <div className='side-nav'>
          <ul>
            <li><Link to='/profile'>Summary</Link></li>
            <li><Link to='/profile/settings'>Settings</Link></li>
            <li><Link to='/profile/account'>My Account</Link></li>
            <li><Link to='/profile/preferences'>Preferences</Link></li>
          </ul>
        </div>
        <div className='main-content'>
         {this.props.children}
        </div>
      </div>
    )
  }
}

export default Profile;

So, such work. Detailed components will be displayed based on the URL. But how do I manage the state and props? As I understand React and Flux, I want the Profile component to manage the state and listen to changes in my stores and distribute these changes to my children. It's right?

My problem is that there is no intuitive way to pass the details to the components provided by this.props.children, which makes me feel that my current architecture and / or understanding of the flow is incorrect.

It would be very helpful to rate a few recommendations.

+2
1

, , . .

API, React , , , (way to pass props to components rendered by this.props.children)

-, cloneElement

React, , , .

, " " - , , .

,

<div className='main-content'>
    {React.children.map(this.props.children, (child, index) => {
       //Get props of child
       const childProps = child.props;

       //do whatever else you need, create some new props, change existing ones
       //store them in variables

       return React.cloneElement(child, {
           ...childProps, //these are the old props if you don't want them changed
           ...someNewProps,
           someOldPropOverwritten, //overwrite some old the old props 
       });
     )}
</div>

. Children - map, forEach toArray. .

, .

+1

More articles:


All Articles