CODEWITHSUNDEEP
reactjsreact-router
ohboy21
ohboy21

Reputation: 4319

How to link to a nested route in React?

I have an AngularJS background, and started to play around with React. I'm using the react-router and want have basically this setup:

Template

export default ( props ) => {
  return (
    <div>
      <Navbar></Navbar>
      { props.children }
    </div>
  );
}

Routing in App.js

<Router>
  <Route path="/" component={Template}>
   <IndexRoute component={RestaurantRoulette} />
    <Route name="workspace" path="workspace(/:workspace_id)" component={RestaurantRoulette}>
      <Route name="run" path="run" component={Run}></Route>
    </Route>
  </Route>
</Router>

Navbar

<ul className="navigation">
  <li>RestaurantRoulette</li>
  <Link to="run">Run</Link>
  <li>Save</li>
</ul>

What I want

When I am in localhost:8080/workspaces/444 I want to click on the Run Link, and navigate to localhost:8080/workspaces/444/run

What is the current status

If I manually type the url localhost:8080/workspaces/444/run, everything works fine. But when I click on the Link in the navbar, I get to localhost:8080/run.

Can somebody tell me how this works? How this is all connected?

Upvotes: 1

Views: 520

Answers (1)

Zhang Chao
Zhang Chao

Reputation: 757

I think the Link tag should be like that:

<Link to={'workspaces/' + this.props.workspace_id + '/run'}>Run</link>

you should get the workspace_id from path in Template, and pass it to the NavBar component

Upvotes: 3

Related Questions