Skip to content

Instantly share code, notes, and snippets.

@grrowl
Last active August 29, 2015 14:16
Show Gist options
  • Save grrowl/e03478de4f3eb518f87e to your computer and use it in GitHub Desktop.
Save grrowl/e03478de4f3eb518f87e to your computer and use it in GitHub Desktop.
Subdomain/host matching in react-router

We have a rapidly growing React application which renders on both the server- and client-sides. Some sections of the app are on separate subdomains. The same app uses the same assets across many subdomains, so we control it all through the one runtime. This mean react-router needs to be able to distinguish which host or subdomain it's on.

Proposal

  • HostRoute which subclasses Route and is aware of the host via a static method HostRoute.setHost(url.parse(res.url).hostname)
  • Static method called before Router.run() (on init of app) i.e. HostRoute.setHost(url.parse(req.url).hostname) and/or HostRoute.setHost(window.location.hostname)
  • Makes sense, since host will never change during the lifetime of the application, a significantly lighter approach and "opt-in" for those who require it.
  • Will require addition to modules/Match to ask the Route itself if it might be a match (if host matches or is undefined, return true)
  • Not including HostRoute does not affect application.
### ~~Previously planned changes~~ Initial investigation, affects scope of react-router project (too much)
  • Add host="" param to Route, which takes either string (matching endsWith style) or a RegExp.
  • Add getCurrentHost() to HistoryLocation, HashLocation and friends
  • Add host support to Match, either first-class (as an argument in new Match(pathname, params, query, routes) or by adding a sneaky key params.___host___
  • Affects many lines of code, probably outside of the core scope of the react-router project.

Thoughts?

problem: need routes to declaratively short-circuit during matching if they're not applicable

solution: add Route.setCriteria({ host: value }), <Route criteria={ { host: value} } /> param, and filter during Matching.

  1. add Route criteria="" and write it up to modules/Route.createRoute
  2. add Route.meetsCriteria() and wire it up to modules/Match.deepSearch
  3. ????
  4. add Tests

Investigations:

  1. alternative syntax, like <Route match-host="value" /> instead of <Route criteria={ { host: value } } />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment