Router push with Switch about wouter

[drcmda]

Could switch be made official? Sometime you want to transition routes in a central place as opposed to individual transitions, for instance: https://codesandbox.io/embed/jp1wr1867w

[molefrog]

@drcmda I plan to introduce the <Switch /> component in version v1.2.0 which hopefully will take place later this week. When I was designing the library my initial thought was: if a route will always match the entire path (like with exact option always on), there is no need for a switch. However, I must admit there are cases like this one:

<Switch>
  <Route path="/users/home">All users</Route>
  <Route path="/users/:id">User's Page</Route>
</Switch>

Where switch is only way to do a proper exclusive routing.
So, I've adapted your sandbox and made a PoC with the Switch: https://codesandbox.io/s/w581z5xp5

[molefrog]

Hey @nkov thanks for trying the library out!
I recreated your example in Code Sandbox here and looks like there are two reasons why this doesn't work:

1. When there is no match, Switch returns undefined, which makes React throw an error. I fixed that by checking this edge case and returning null.
2. The bigger problem is that useRouter hook does not make a component rerender in case if location changes. Fortunately, there is another hook for that useLocation. It returns a tuple of [location, setLocation] which basically allows to manage current location as if it was a part of the state.

I made another version of the component, so check this out. It's kinda similar to the original Switch implementation from React Router package. Let me know what you think.

I also thought that it would be nice to have switch around it the library, so I might end up including it in the sources. I wasn't sure if people use Switch a lot, but seems like they do. Anyways, curious to hear back from you!

[drcmda]

The only thing im asking for is that we need to be able to forward a location (or whatever it is called here) to that switch, which will allow transitions to fade out old history states safely.

<Switch location={...}>
  <Route path="/users/home">All users</Route>
  <Route path="/users/:id">User's Page</Route>
</Switch>

If you're done i would love to make a react-spring codesandbox for wouter. 🙂

[nkov]

@molefrog ah, did not know about this hook, maybe it would be good to also add to the readme with some small description. As far as adding the <Switch> component to the library, I think that's a great idea. Adding a <Redirect> which can be created using the hook as well, as you demonstrated on Reddit, might be nice too. It's not difficult to implement each time but it's nice to have it as a component anyway.

[molefrog]

Hey, @nkov @drcmda just pushed a PR with Switch and Redirects implemented #9. Let me know what you think!

[drcmda]

Looks great! If it's merged could you ping me?

[molefrog]

@drcmda Okay, perfect. Gonna merge this right away and let you know when the new version is out, so you can recreate the transition demo.

[molefrog]

@drcmda I've released version v1.2.0 of the library with the new Switch component include. Here is an updated demo (https://codesandbox.io/s/w581z5xp5) with react-spring transitions.

[drcmda]

I did one too https://codesandbox.io/s/oo4ox81q5 but still struggle with performance, two react reconcilers in there and too many elements, it's my fault not wouters. :( But wouter is doing great, i love the fact there's no context in it, that allows it to work across reconcilers, like nothing else really does. I'll try to fix it up some more and tweet this out soon.

[nkov]

Looks great, thanks.