CODEWITHSUNDEEP
reactjsreact-router
Kuan
Kuan

Reputation: 11389

Use absolute path or relative path in React Route

All:

I am pretty new to React Router, when I follow its offical tutorial at lesson 7:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/07-more-nesting

When it comes to route params like:

// index.js
// ...
<Route path="/repos" component={Repos}>
  <Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>

It starts to use absolute path, I am wondering :

[1] How does React-Router decide to use abosulte path or relative path, is it only because the path starts with slash "/"(one thing I find out is: once I add slash to a relative path at the beginning, that path turns into absolute path, no matter what its parent routes are.)?

[2] Is there a way I can use relative params path route? If not, then what is the point of the parent Route whose path is "/repos"?

Thanks

Upvotes: 6

Views: 8952

Answers (1)

hellojeffhall
hellojeffhall

Reputation: 301

  1. React router currently uses absolute paths, but they are working on relative routes

  2. If you want relative routes, it looks like people are getting the current route from the match param, and then appending a route to it. E.g., <Route path={match.path + '/more/stuff'}/>

In the example that you gave, the point is that whenever the current path contains /repos there will be some content (the list of links to repos generated by component={Repos}) that will be visible. When the path is /repos/:userName/:repoName it will continue to show that content because the path still matches /repos, but it will also show a particular repo's content (component={Repo}).

Upvotes: 4

Related Questions