Routing weirdness when nesting

[szmarci]

I came across a weird thing I don't really understand regarding routing.
I made a small repo in case you want to reproduce it: https://github.com/szmarci/remix-routing

I have 3 components, Blue, Yellow and Red.
I have 2 subroutes /colors /colors/yellowandred.

Color components are really simple, just a color name, some style and class:

export const Yellow = () => {
  return (
    <div className="yellow" style={{backgroundColor: "yellow"}}>
      yellow
    </div>
  )
}

When we hit /colors I render a button and the Blue component:

So far so good. The button will route to /colors/yellowandred and I also pass in some state to the route.
navigate("yellowandred", {state: {colorid: "red"}});
I read this value from the url when we arrive at /colors/yellowandred and conditionally render red or blue:

The result:

Still okay, yellow and red are rendered as expected.
Now when I refresh it gets weird:

At first it flashes with the text blue for a moment, then it immediately swaps it to red, but it is keeping blue's class and style.
How is this possible?

[mkrtchian]

This seems to be a hydration problem (mismatch between the React code rendered in the server, and the one rendered in the client).
When reloading with the weird behavior I get this error:

Warning: Prop className did not match. Server: "blue" Client: "red"

The Location state you are using is explained in the React Router V6 documentation here.
It is created on client side, and seems to be kept by your browser until you change the URL, or put the same URL by hand after changing it.

I guess that as Remix does not know that information on server side. When you hit reload, the server renders your page first thinking it's the Blue component. Then that comes to the client and is displayed immediately by the browser as Blue. And when the client side JavaScript loads it "hydrates" the existing DOM with the client side React code, which results in something a bit different: the Red component. And only a part of it is changed, the className is kept with a warning.

I don't know if this has to be considered as a bug or not 🤔 Maybe Remix could send the state information to the server when it is set ?

[ccssmnn]

Exactly this.

When you want the setting to be preserved on a refresh, consider storing the state in a session (cookie or database). Then, each loader and action can read the cookie on the server and return the result.

[szmarci]

Well, thanks. I don't currently have any loader, action, session, whatnot in this app. But in essence I have to store the state info in a cookie when pushing the button on /colors and when going to /colors/yellowandred that cookie must be sent along with the request to the loader and from the loader I have to return that state to the component and use it in the conditional rendering, right?

Btw, I noticed I could hack it by changing the Red component markup from div to span, so I guess hydration cannot "merge" them when they are of different type. I mean it still flashes for a moment with the server side version, but then correctly changes to the client side version.

[ccssmnn]

Yes. See the sessions chapter in the docs for guidance.