React router v4 nested route relative path

Admin 1
Viewed 6887

I have component with a react router v4 to anohter component, i want to add another routes in the second component.

this is the main route:

const Dashboard = () => {
  return (
    <div>
      <Header/>
      <Router>
        <div>
          <Route path="/" exact component={Wall} />
          <Route path="/challenge/:id" component={Challenge} />
        </div>
      </Router>
    </div>
  )
}

and this is the Challenge component:

class Challenge extends Component {
  ...

  render() {
    return (
      ...
        <Router>
          <div>
            <Route path="/overview" exact component={Overview} />
            <Route path="/discussions" exact component={Discussions} />
          </div>
        </Router>
      ...
    )
  }
}

and this is not working for me..

The only option that works is to include the /challenge/:id inside the challenge component:

<Route path="/challenge/:id/overview" exact component={Overview} />
<Route path="/challenge/:id/discussions" exact component={Discussions} />

in the end i want to make the route look like this for example:

www.site.com/challenge/1/overview

www.site.com/challenge/1/discussions

But without containing the full route within each nested route.

react-router reactjs
1 Answers

Try this in your Challenge component:

class Challenge extends Component {
  ...

  render() {
    const { match } = this.props;
    return (
      ...
      <div>
        <Route path={`${match.url}/overview`} exact component={Overview} />
        <Route path={`${match.url}/discussions`} exact component={Discussions} />
      </div>
      ...
    )
  }
}

Note that you shouldn't need to add a new Router instance as your Challenge component is a descendant of the Router instance you defined in your top-level Dashboard component.

user_54386160
Related