{"action":"created","issue":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/5127","repository_url":"https://api.github.com/repos/ReactTraining/react-router","labels_url":"https://api.github.com/repos/ReactTraining/react-router/issues/5127/labels{/name}","comments_url":"https://api.github.com/repos/ReactTraining/react-router/issues/5127/comments","events_url":"https://api.github.com/repos/ReactTraining/react-router/issues/5127/events","html_url":"https://github.com/ReactTraining/react-router/issues/5127","id":229197664,"number":5127,"title":"RFC: Relative Links and Routes","user":{"login":"ryanflorence","id":100200,"avatar_url":"https://avatars0.githubusercontent.com/u/100200?v=4","gravatar_id":"","url":"https://api.github.com/users/ryanflorence","html_url":"https://github.com/ryanflorence","followers_url":"https://api.github.com/users/ryanflorence/followers","following_url":"https://api.github.com/users/ryanflorence/following{/other_user}","gists_url":"https://api.github.com/users/ryanflorence/gists{/gist_id}","starred_url":"https://api.github.com/users/ryanflorence/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryanflorence/subscriptions","organizations_url":"https://api.github.com/users/ryanflorence/orgs","repos_url":"https://api.github.com/users/ryanflorence/repos","events_url":"https://api.github.com/users/ryanflorence/events{/privacy}","received_events_url":"https://api.github.com/users/ryanflorence/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":64,"created_at":"2017-05-16T23:33:15Z","updated_at":"2018-03-11T03:02:34Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"We intend to ship Relative Routes and Relative Links soon. I'd like to hear people's comments on something I'm not totally sure about yet.\r\n\r\n## What are Relative Links and Routes?\r\n\r\nInstead of `<Route path={match.path + '/more/stuff'}/>` you could simply do `<Route path=\"more/stuff\"/>` and Router will use the lack of `/` at the start of your path as a hint that you want to just use whatever path is above you. Relative!\r\n\r\nSame with links. Instead of `<Link to={match.url + '/more/stuff'}/>` you can just do `<Link to=\"more/stuff\"/>`.\r\n\r\n## The Problem\r\n\r\nGoing \"down\" as shown in the quick example up there is easy. But we're not sure what \"..\" should mean. There are two options for what it means: go up a URL segment, or go up a matched route.\r\n\r\n## Go up a URL segment\r\n\r\nWith plain anchors tags, `..` means \"up a URL segment\". Given the following URL, an anchor tag with the following HREFs results in the following URLs:\r\n\r\n```\r\n/clients/invoice/123\r\n```\r\n\r\nhref | url\r\n-----|-----\r\n`payments` | `/clients/invoice/123/payments`\r\n` ` | `/clients/invoice/123`\r\n`.` | `/clients/invoice/123`\r\n`..` | `/clients/invoice`\r\n`../` | `/clients/invoice`\r\n`../..` | `/clients`\r\n`../../` | `/clients`\r\n\r\n(As far as I can tell, feel free to double check!)\r\n\r\nSo I think everybody's intuition around this is to just do exactly that and be done with it. Ship it.\r\n\r\nHowever, I have this gut instinct that our intuition right now might be keeping us from a better meaning of \"..\" in a React Router app?\r\n\r\n## Go up a matched Route\r\n\r\nMaybe your app is something like this:\r\n\r\n```jsx\r\n  <Switch>\r\n    <Route exact path=\"/\" component={Home}/>\r\n    <Route path=\"/clients\" render={() => (\r\n      <Clients>\r\n        <Switch>\r\n          <Route exact path=\".\" component={ClientList}/>\r\n          <Route path=\"invoice/:invoiceId\" component={Invoice}/>\r\n        </Switch>\r\n      </Clients>\r\n    )}/>\r\n  </Switch>\r\n```\r\n\r\nMaybe we want \"..\" to mean \"go up a matched route\" rather than \"go up some url segments\".\r\n\r\nSo now the \"relative\" portion of the Link's `to` prop is the parent Route's path, not the current location.\r\n\r\nto prop | link's url\r\n-----|-----\r\n`..` | `/clients`\r\n`../..` | `/`\r\n\r\nNotice `..` doesn't go to \"invoice\" because that's not a route that will ever match.\r\n\r\n**Pros**\r\n\r\n- When you change a parent Route's `path` prop, the relative links below don't need to be updated\r\n- You can't link to something that doesn't have UI (probably, see cons*)\r\n\r\n**Cons**\r\n\r\n- *Since any ol' route can match a location w/o a relationship with other Route's that match, a Link in one place can potentially have a completely different href than a link somewhere else--even though they have the same `to` prop 😬.  It all depends on the Route's path the Link is rendered within.\r\n- It's against most people's intuition\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/ReactTraining/react-router/issues/comments/372085589","html_url":"https://github.com/ReactTraining/react-router/issues/5127#issuecomment-372085589","issue_url":"https://api.github.com/repos/ReactTraining/react-router/issues/5127","id":372085589,"user":{"login":"mrchief","id":781818,"avatar_url":"https://avatars3.githubusercontent.com/u/781818?v=4","gravatar_id":"","url":"https://api.github.com/users/mrchief","html_url":"https://github.com/mrchief","followers_url":"https://api.github.com/users/mrchief/followers","following_url":"https://api.github.com/users/mrchief/following{/other_user}","gists_url":"https://api.github.com/users/mrchief/gists{/gist_id}","starred_url":"https://api.github.com/users/mrchief/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrchief/subscriptions","organizations_url":"https://api.github.com/users/mrchief/orgs","repos_url":"https://api.github.com/users/mrchief/repos","events_url":"https://api.github.com/users/mrchief/events{/privacy}","received_events_url":"https://api.github.com/users/mrchief/received_events","type":"User","site_admin":false},"created_at":"2018-03-11T03:02:34Z","updated_at":"2018-03-11T03:02:34Z","author_association":"NONE","body":"Why would you need a flag? Whether a link is relative or absolute is a _solved_ problem. Been so since the early days of computing. "}}
{"actor":{"display_login":"mrchief"}}