5 ms·

> webcomponent based router Routers can be (and should be, IMO) written to be independent of UI component libraries such as React and webcomponents. See an exa

> webcomponent based router Routers can be (and should be, IMO) written to be independent of UI component libraries such as React and webcomponents. See an example here: https://github.com/Rajeev-K/mvc-router https://github.com/Rajeev-K/mvc-router You can use it with React---and in some ways it works better than react-router.

thatswrong0 7y ago
Yeah I'm not a fan at all of react-router because it's too dependent on React. For redirecting, for example, they recommend you render a <Redirect> component. Which is just bananas to me.
- arthurdenture 7y ago
  The alternative would be to write a side effect inside your `render()` function, which is illegal -- it breaks the new Concurrent mode rendering, which can call render() speculatively. I mean, I see why it's intuitively unappealing to you, but there are perfectly good reasons for the design.
  - thatswrong0 7y ago
    There are "perfectly good reasons" in the sense that if you artificially limit yourself to using the React component tree to manage routes, yes it makes sense how they arrived at this solution. But after dealing with it for a while, it's just so obviously not the correct approach, and it's crazy to me that it's the defacto router. Cargo culting at its finest. The router could exist outside of or at a higher level than the component tree.
    - jaquers 7y ago
      It's the defacto router because it has gone through many iterations, has lots of users, is easy to bring into a React app, and doesn't fight w/ React, it works with it. Plus there are a variety of approaches to declaring routes. [0] I'm not sure I see how obvious it is that a <Redirect/> is wrong. But that's fine, I take your point that it's not particularly intuitive. I'm of the opinion that routing, in general, is a function of application state - and I like to manage my application state with Redux - so I will often also mix in connected-react-router [1]. This lets you do navigation w/ an imperative API [2]. [0] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config https://github.com/ReactTraining/react-router/tree/master/pa... [1] https://github.com/supasate/connected-react-router https://github.com/supasate/connected-react-router [2] https://github.com/supasate/connected-react-router/blob/master/index.d.ts#L80 https://github.com/supasate/connected-react-router/blob/mast...
  - Silhouette 7y ago
    The alternative would be to write a side effect inside your `render()` function, which is illegal That's one alternative. Another is not to try implementing behaviour that has nothing to do with rendering using a rendering library in the first place. A horrible amount of accidental complexity has been created in the React ecosystem when people have tried to use it like a full framework. If all you have is a hammer, maybe it's time to consider using other tools as well.
- allover 7y ago
  It's not really bananas when you actually start to think of everything 'as components', and consider that 'render' can neatly, declaratively describe behaviour, not just the DOM.
  - thatswrong0 7y ago
    That _is_ how I think about components, but it's still bananas. Render does not neatly describe this behavior because it necessitates setting unnecessary state. That's gross. Usually when I need to trigger a redirect, I'm in some business-level function. So to redirect this way, I would need to set some state in my store, re-render, then hit the conditional, which would redirect, probably unset that state, and then probably trigger some additional business logic. When really all I want to do is in the business function, directly trigger the redirect and maybe some other logic without any indirection. redux-react-router exists, but it's API is still obtuse compared to something like redux-first-router.
    - jaquers 7y ago
      > When really all I want to do is in the business function, directly trigger the redirect and maybe some other logic without any indirection. Heh, didn't see this comment before I left a novel up the tree. Seems we have similar ideas about state management. I think the default RR API is straight React, and that is by design.
    - Tenemo 7y ago
      Since you are talking about using Redux, you most definitely can dispatch push actions with libs like connected-react-router or just use the history API directly (for things like replacing state instead of pushing). Most of the redirects I write are inside business logic and I don't like mixing <Redirect /> in there, too.
    - allover 7y ago
      Then you can use `useHistory` (or `withRouter` if you're not hooks-ready). I somewhat agree that the <Redirect /> component is not actually that useful, it's only useful in very simple cases like "based on one route plus conditional redirect to another", e.g.: <Route path="/"> {usersPreviousShoppingGender === "women" ? ( <Redirect to="/women" /> ) : ( ... )} ... </Route> <Route path="/women">
- jtms 7y ago
  It’s bananas to you that a library with the word react in the name would be dependent on react? It’s an add on you would literally never use unless you are building a react app
crooked-v 7y ago
My favorite routers to use with React at the moment are redux-first-router (define a route map, and an object in your Redux store gets automatically two-way synced with browser location state; your 'routing' is actually just a switch statement over the current location state), and Next.js (make some component files under pages/ and they get automatically rendered as routes; wrap a filename in brackets and it's used as a query param value wildcard). Both have advantages and disadvantages but are very low-mental-overhead in practice.
- allover 7y ago
  Disagree there's anything really low-mental-overhead about bringing redux into your project.
- davidjnelson 7y ago
  Can second redux-first-router being fantastic.
spankalee 7y ago
Web components are not a UI library though. They are the native component model for the web.
- interlocutor 7y ago
  HTML custom elements (basis for web components) are intended for things that should be added to DOM. Using it for any other purpose is probably a misuse.
  - jjcm 7y ago
    In my personal case I'm using it so the DOM is more literal as to what's happening on the page. I'm of the naive opinion that you should be able to read the DOM and have a general sense of what the site looks like. Since I'm making a single-page site that loads everything at once, I have a webcomponent based router that declaratively states what route will be active given the URL. For example: 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎𝚛 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚑𝚘𝚖𝚎") // 𝚜𝚘𝚖𝚎 𝚑𝚘𝚖𝚎 𝚙𝚊𝚐𝚎 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚗𝚎𝚠𝚜") // 𝚜𝚘𝚖𝚎 𝚗𝚎𝚠𝚜 𝚙𝚊𝚐𝚎
    - uryga 7y ago
      not sure what happened, but your code example is almost all tofu (unicode [X]) to me. looks like it's using characters like "mathematical monospace lowercase letter 'm'" etc edit: unidecoded: my-router my-route(pattern="/home") // some home page my-route(pattern="/news") // some news page

thatswrong0 7y ago

Yeah I'm not a fan at all of react-router because it's too dependent on React. For redirecting, for example, they recommend you render a <Redirect> component. Which is just bananas to me.

arthurdenture 7y ago
The alternative would be to write a side effect inside your `render()` function, which is illegal -- it breaks the new Concurrent mode rendering, which can call render() speculatively. I mean, I see why it's intuitively unappealing to you, but there are perfectly good reasons for the design.
- thatswrong0 7y ago
  There are "perfectly good reasons" in the sense that if you artificially limit yourself to using the React component tree to manage routes, yes it makes sense how they arrived at this solution. But after dealing with it for a while, it's just so obviously not the correct approach, and it's crazy to me that it's the defacto router. Cargo culting at its finest. The router could exist outside of or at a higher level than the component tree.
  - jaquers 7y ago
    It's the defacto router because it has gone through many iterations, has lots of users, is easy to bring into a React app, and doesn't fight w/ React, it works with it. Plus there are a variety of approaches to declaring routes. [0] I'm not sure I see how obvious it is that a <Redirect/> is wrong. But that's fine, I take your point that it's not particularly intuitive. I'm of the opinion that routing, in general, is a function of application state - and I like to manage my application state with Redux - so I will often also mix in connected-react-router [1]. This lets you do navigation w/ an imperative API [2]. [0] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config https://github.com/ReactTraining/react-router/tree/master/pa... [1] https://github.com/supasate/connected-react-router https://github.com/supasate/connected-react-router [2] https://github.com/supasate/connected-react-router/blob/master/index.d.ts#L80 https://github.com/supasate/connected-react-router/blob/mast...
- Silhouette 7y ago
  The alternative would be to write a side effect inside your `render()` function, which is illegal That's one alternative. Another is not to try implementing behaviour that has nothing to do with rendering using a rendering library in the first place. A horrible amount of accidental complexity has been created in the React ecosystem when people have tried to use it like a full framework. If all you have is a hammer, maybe it's time to consider using other tools as well.
allover 7y ago
It's not really bananas when you actually start to think of everything 'as components', and consider that 'render' can neatly, declaratively describe behaviour, not just the DOM.
- thatswrong0 7y ago
  That _is_ how I think about components, but it's still bananas. Render does not neatly describe this behavior because it necessitates setting unnecessary state. That's gross. Usually when I need to trigger a redirect, I'm in some business-level function. So to redirect this way, I would need to set some state in my store, re-render, then hit the conditional, which would redirect, probably unset that state, and then probably trigger some additional business logic. When really all I want to do is in the business function, directly trigger the redirect and maybe some other logic without any indirection. redux-react-router exists, but it's API is still obtuse compared to something like redux-first-router.
  - jaquers 7y ago
    > When really all I want to do is in the business function, directly trigger the redirect and maybe some other logic without any indirection. Heh, didn't see this comment before I left a novel up the tree. Seems we have similar ideas about state management. I think the default RR API is straight React, and that is by design.
  - Tenemo 7y ago
    Since you are talking about using Redux, you most definitely can dispatch push actions with libs like connected-react-router or just use the history API directly (for things like replacing state instead of pushing). Most of the redirects I write are inside business logic and I don't like mixing <Redirect /> in there, too.
  - allover 7y ago
    Then you can use `useHistory` (or `withRouter` if you're not hooks-ready). I somewhat agree that the <Redirect /> component is not actually that useful, it's only useful in very simple cases like "based on one route plus conditional redirect to another", e.g.: <Route path="/"> {usersPreviousShoppingGender === "women" ? ( <Redirect to="/women" /> ) : ( ... )} ... </Route> <Route path="/women">
jtms 7y ago
It’s bananas to you that a library with the word react in the name would be dependent on react? It’s an add on you would literally never use unless you are building a react app

crooked-v 7y ago

My favorite routers to use with React at the moment are redux-first-router (define a route map, and an object in your Redux store gets automatically two-way synced with browser location state; your 'routing' is actually just a switch statement over the current location state), and Next.js (make some component files under pages/ and they get automatically rendered as routes; wrap a filename in brackets and it's used as a query param value wildcard). Both have advantages and disadvantages but are very low-mental-overhead in practice.

allover 7y ago
Disagree there's anything really low-mental-overhead about bringing redux into your project.
davidjnelson 7y ago
Can second redux-first-router being fantastic.

spankalee 7y ago

Web components are not a UI library though. They are the native component model for the web.

interlocutor 7y ago
HTML custom elements (basis for web components) are intended for things that should be added to DOM. Using it for any other purpose is probably a misuse.
- jjcm 7y ago
  In my personal case I'm using it so the DOM is more literal as to what's happening on the page. I'm of the naive opinion that you should be able to read the DOM and have a general sense of what the site looks like. Since I'm making a single-page site that loads everything at once, I have a webcomponent based router that declaratively states what route will be active given the URL. For example: 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎𝚛 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚑𝚘𝚖𝚎") // 𝚜𝚘𝚖𝚎 𝚑𝚘𝚖𝚎 𝚙𝚊𝚐𝚎 𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚗𝚎𝚠𝚜") // 𝚜𝚘𝚖𝚎 𝚗𝚎𝚠𝚜 𝚙𝚊𝚐𝚎
  - uryga 7y ago
    not sure what happened, but your code example is almost all tofu (unicode [X]) to me. looks like it's using characters like "mathematical monospace lowercase letter 'm'" etc edit: unidecoded: my-router my-route(pattern="/home") // some home page my-route(pattern="/news") // some news page