CODEWITHSUNDEEP
javascriptreactjsreact-routersingle-page-application
Italo Borges
Italo Borges

Reputation: 2554

React Router v4 nested route to change the entire content

I have been trying to understand how to apply the concept of nested routes to my scope.

I need these routes:

/projects

This route will have a list of projects and a button to create a new project.

/projects/new

When this route is called, will appear a panel above the content, it doesn't change the page projects.

/projects/:projectId/dashboard

When a project is selected, I need to show its dashboard in a whole new page, different than the /projects

My react route config:

<Switch>
  <Route exact path='/home' component={Home}/>
  <Route path='/home' component={Home}/>
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

My render inside projects to receive the other route:

<section className='content projects'>
  <div>
    <h3>List</h3>
    <ul>{list}</ul>
  </div>

  <Route path='/projects/new' render={
    () => {
      return <div>
        <h3>New Project</h3>
        <form action="#">
          <input type="text" placeholder='Contract name'/>
          <input type="text" placeholder='Project name'/>
          <button type="submit">Create</button>
        </form>
        <NavLink to='/projects'>Close</NavLink>
      </div>
    }
  } />
</section>

Now, where should I put this route:

<Route path='/projects/:projectId/dashboard' component={Dashboard} />

I thought if I put inside the switch, would work, but the page gets blank.

Anyone can help me with this? =)

Thanks!

UPDATE 1

I tried to put my dashboard route above /projects with exact. Now I'm getting a blank content where it should appear the Dashboard component. The route for projects is still working normally.

<Switch>
  <Route exact path='/' component={Home}/>
  <Route exact path='/projects/:projectId/dashboard' render={ () => {
      return <h2>Dashboard</h2>
  }} />
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

UPDATE 2

I have created a separated project and it worked with the answer in this topic. Now I will try to figure out why it didn't work in the project that I'm having blank page.

Upvotes: 1

Views: 1723

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16451

Try adding the exact prop to the Route and make sure that it appears BEFORE /projects in the Switch:

<Switch>
  <Route exact path='/home' component={Home}/>
  <Route path='/home' component={Home}/>
  <Route exact path='/projects/:projectId/dashboard' component={Dashboard} />
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

What's happening is your first /projects is matching any route that starts with /projects. Adding the exact prop will make sure that if the route matches /projects/:projectId/dashboard exactly, it will render Dashboard.

Upvotes: 1

Related Questions