CODEWITHSUNDEEP
reactjsreact-routermaterial-uireact-router-v4
James
James

Reputation: 3815

Displaying React component next to a sidebar component

I am trying to show a header, sidebar and a component. The header and the sidebar should always show. The third component will render depending on what item is clicked on the sidebar.

For the sidebar, I am using material-ui@next <Drawer /> component. For the navigation I am using react-router-4 as follows:

App.js

render() {
  return (
    <Router>
      <div>
        <Route component={Header} />
        <Route path="/dashboard" component={Sidebar} />
        <Route path="/dashboard/usernew" component={UserNew} />
      </div>
   </Router>
  )
}

I am successfully rendering the desired component. For simplicity, refer to the below code:

Sidebar.js

...
<List component="nav">
  <ListItem
    button
    component={Link}
    to="/dashboard/usernew"
  >
      New User
  </ListItem>
</List>
...

The problem is that the desired component, <UserNew />, is not rendering next to the sidebar but below it. Attached is an image to understand my problem better:

enter image description here

Can someone point me in the right direction to display the component next to the <Sidebar />?

Upvotes: 0

Views: 3695

Answers (2)

James
James

Reputation: 3815

I solved this problem by putting the children dashboard routes inside the <Sidebar /> component. The code therefore looks like this:

App.js:

  render() {
    return (
      <Router>
        <div>
          <Route component={Header} />
          <Route path="/dashboard" component={Sidebar} />
        </div>
     </Router>

Sidebar.js

<div>
<Drawer>
<List component="nav">
  <ListItem
    button
    component={Link}
    to="/dashboard/usernew"
  >
      New User
  </ListItem>
</List>
</Drawer>
<div>
   <Route path="/dashboard/usernew" component={UserNew} />
</div>
</div>

Upvotes: 0

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

I'm not sure if that's gonna help but I would change some things.

render() {
  return (
     <Router>
        <div>
          <Header />
          <Route path="/dashboard" render={props => (
            <Drawer
              variant="permanent"
              anchor="left"
            >
              <Route path="/dashboard/usernew" component={UserNew} />
            </Drawer>
          ))}
          />
        </div>
     </Router>
   )
 }
  1. Header will get always rendered so you don't actually need to wrap it in Route.
  2. Drawer requires some props to declare it state so it would be nice if you show what you passed to it in Sidebar. My guess is that you try to make permanent drawer which requires that you use children props like above.

Upvotes: 1

Related Questions