CODEWITHSUNDEEP
reactjs
Flupper
Flupper

Reputation: 321

why the requested link not showing up the nested component

the nested Route in the following code is not working please need your help to solve out the issue.

the output is after click on a Course it will redirect me to the request link which will be for example: localhost.com/course/1?title=blabla but the page is empty

App.js

<BrowserRouter>

      <div className="App">
          <header>
                <nav>
                    <ul>
                        <li ><NavLink to='/courses'>Courses</NavLink></li>
                        <li><Link to='/users'>Users</Link></li>
                    </ul>
                </nav>
            </header>
        <Switch>
            <Route path='/courses' component={Courses} />
            <Route path='/users' component={Users}/>

        </Switch>

      </div>
</BrowserRouter>

Courses.js

CourseHandler=(id,title)=>{
    this.props.history.push({
        pathname: '/course/'+id,
        search:'?title='+title

    })
}

render () {
    console.log(this.props)
    return (
        <div>
            <h1>Amazing Udemy Courses</h1>
            <section  className="Courses">
                {
                    this.state.courses.map( course => {
                        return <article  key={course.id} className="Course" onClick={() => this.CourseHandler(course.id,course.title)}>{course.title}</article>
                    } )
                }
            </section>
             <Route path='/course/:id'  component={Course}/>
        </div>
    );
}

Upvotes: 0

Views: 28

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

The Issue

Your main Switch doesn't have a route that matches the new one you just pushed.

<Switch>
  <Route path='/courses' component={Courses} />
  <Route path='/users' component={Users} />
</Switch>

Your course handler pushes a route your Switch doesn't match.

CourseHandler=(id,title)=>{
  this.props.history.push({
      pathname: '/course/'+id, // new route is "/course/xxxx", i.e. course is singular
      search:'?title='+title

  })
}

Solution 1

You can either move the route to the Switch

<Switch>
  <Route path='/courses' component={Courses} />
  <Route path='/course/:id' component={Course} />
  <Route path='/users' component={Users} />
</Switch>

Solution 2

Or update the new Route to include the path prefix already matched (I think this is what you intended, so the courses are still mapped)

render () {
  console.log(this.props)
  return (
    <div>
      <h1>Amazing Udemy Courses</h1>
      <section  className="Courses">
        {
          this.state.courses.map( course => {
            return (
              <article
                key={course.id}
                className="Course"
                onClick={() => this.CourseHandler(course.id, course.title)}
              >
                {course.title}
              </article>
            );
          })
        }
      </section>
      <Route path='/courses/:id' component={Course}/> // updates to plural "courses" so it can match the outer route
    </div>
  );
}

Solution 3

A third option is to switch your Switch for a regular Router so multiple matches can be returned instead of just the first one.

import { BrowserRouter as Router } from 'react-router-dom';

...

<Router>
  <Route path='/courses' component={Courses} /> // this one displays the courses list
  <Route path='/courses/:id' component={Course} /> // then this displays the specific course
  <Route path='/users' component={Users} />
</Router>

Upvotes: 1

Related Questions