firm-tan

Default search params on initial render

I have an SSR app (the server rendering is PHP, not React). So, the initial request goes to PHP, a page is rendered with a React app embedded, and tanstack router takes over from there. On the initial render of the whole app, the preSearchFilters doesn't seem to set default values. Related discussion from react-location here: https://github.com/TanStack/router/discussions/143#discussioncomment-1775952 Any way to set initial defaults? I guess I could navigate (with replace:true) in an effect but then I guess I would have to make all the params optional (given they won't exist on the initial render).

GitHub

Default Search Params before render · Discussion #143 · TanStack/ro...

What's the best way with React Location to add default search params to the url before render ? I would like different search params on different routes For exemple /A?alpha=1 /B?beta=2 /D?...

12 Replies

firm-tanOP•3y ago

The workaround I'm going with for now is navigating to the current location with replace:true in the module scope immediately after creating the router.

const router = createReactRouter({
  routeConfig,
  basepath,
})

router.navigate({
  from: router.state.currentLocation.pathname as '/',
  replace: true,
})

const router = createReactRouter({
  routeConfig,
  basepath,
})

router.navigate({
  from: router.state.currentLocation.pathname as '/',
  replace: true,
})

@Tanner Linsley Is there any chance you could confirm how navigate will behave when specifying only from and replace like this? What I'm aiming for here is just to navigate to the current page (so that the preSearchFilters on all the matched routes get executed).

foreign-sapphire•3y ago

From and to should not be required. It will default to navigating to the same page you are on. Passing replace true is all you’d need. That said, I’m working on a fix for this underlying issue.

firm-tanOP•3y ago

When I don't include either to / from / search, it navigates to undefined (just FYI) ... but otherwise it does work

foreign-sapphire•3y ago

Bug then.

firm-tanOP•3y ago

Would you like me to file an issue?

foreign-sapphire•3y ago

I’m currently reworking some of the React adapter, API to be leaner and easier to compose. It will also be much more performant

firm-tanOP•3y ago

Nice

foreign-sapphire•3y ago

I’ll make sure I get this fixed while I do that

firm-tanOP•3y ago

Since I have you just another little thing I noticed, when navigating, the router always adds a slash to the basepath. So if I land on mysite.com/page/one and then try to add some search params to the root index route, I end up at mysite.com/page/one/?param... This is not a dealbreaker so I was going to just ignore it but if you think that behviour should change and you want me to file an issue just let me know

foreign-sapphire•3y ago

I will be adding an option to customize trailing slash behavior In fact, if you wanted to create an issue for that, that would be a good reminder for me

firm-tanOP•3y ago

I will do

firm-tanOP•3y ago

https://github.com/TanStack/router/issues/458

GitHub

Customizable trailing slash behaviour · Issue #458 · TanStack/router

Describe the bug Currently the router always adds a trailing slash to the basepath. So if you are at mysite.com/page/one with basepath: '/page/one' and you try to use navigate to up...

Gaming

Programming

Default search params on initial render

Did you find this page helpful?