CODEWITHSUNDEEP
reactjsreact-router
philipp
philipp

Reputation: 16505

REACT-ROUTER—Render output in parent component

I have this setup in my main.js

<Router history={history}>
  <Route path="/" component={Window}>
    <IndexRoute component={Users} />
    <Route path="users" component={Users}>
      <Redirect from="add" to="edit" />
      <Route path="edit(/:id)" component={UserEdit} />
    </Route>
    <Route path="groups" component={Groups} />
    <Route path="permissions" component={Permissions} />
    <Route path="*" component={Error} />
  </Route>
</Router>

If the url changs to users/add or users/edit the UserEdit component is available as child of the Users Component, so this code Users.js

render() {
  return (
    …
    {this.props.children}
  );
}

Gives me the form right away. But I would like to have to appear the rendered result as child of the Window Component, which is the parent component of Users in this case.

How can I make that happen?

Upvotes: 0

Views: 971

Answers (3)

Alexis Almeida
Alexis Almeida

Reputation: 1

I solved the same problem using an absolute path to the child pages in the routing: /users_add instead of users/add /users_edit instead of users/edit

Sorry, but I didn't find a better solution.

Upvotes: 0

Anup
Anup

Reputation: 2434

Hey I tried to recreate your example to check whether you need to add the parent path to render the child component inside the parent component. Here is the code. To recreate this just create a folder in react-router examples and add an index.html and copy this code in app.js

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link,IndexRoute,Redirect } from 'react-router'

import withExampleBasename from '../withExampleBasename';

const Window = (props)=> {
  return (<div>
    Window
    {props.children}
  </div>);
};
const Users = (props)=> {
  return (<div>
    Users
    {props.children}
  </div>);
};

const UserEdit = (props)=> {
  return (<div>
    UserEdit
    {props.children}
  </div>);
};

const Groups = (props)=> {
  return (<div>
    Users
    {props.children}
  </div>);
};

const Permissions = (props)=> {
  return (<div>
    Permissions
    {props.children}
  </div>);
};

const Error = (props)=> {
  return (<div>
    Error
    {props.children}
  </div>);
};

render( (
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={Window}>
      <IndexRoute component={Users}/>
      <Route path="users" component={Users}>
        <Redirect from="add" to="edit"/>
        <Route path="edit(/:id)" component={UserEdit}/>
      </Route>
      <Route path="groups" component={Groups}/>
      <Route path="permissions" component={Permissions}/>
      <Route path="*" component={Error}/>
    </Route>
  </Router>

), document.getElementById( 'example' ) )

Now the Router settings are same as you mentioned in your question. And I got everything right, I mean UserEdit was always rendered as child of user which intern is rendered as a child of Window. enter image description here

Upvotes: 1

Lance Pollard
Lance Pollard

Reputation: 79468

You can move the users/edit route and change edit(/:id) to users/edit(/:id):

<Router history={history}>
  <Route path="/" component={Window}>
    <IndexRoute component={Users} />
    <Route path="users/edit(/:id)" component={UserEdit} />
    <Route path="users" component={Users}>
      <Redirect from="add" to="users/edit" />
    </Route>
  </Route>
</Router>

Upvotes: 0

Related Questions