How to replace location.state？

[bingling0084]

Migrating from Reach Router v5 to React Location:
const history = useHistory();
history.replace({ pathname: '/', state: { name: 'Lily' }});
...
const location = useLocation();
// do sth with location.state...

How do I use React Location to replace the above code？
More detail, how do I use navigate with state?

[henrikq]

Any plan for this, and will it be typesafe?

[gabrielmoura]

I also have the same doubt. Does the group intend to implement? Today it is a determining factor for me.

[BrendanC23]

I have the same question as @tykhan. I want to use router.navigate() to switch to a new route, and I want to pass some state to the new route. Without TSR, I would lift the state up into an ancestor component and pass it as props. With TSR, there is the state parameter in navigate() that I can use instead.

Is there a way to define state on a per-route basis? Each route would require different state/props, and so defining a global interface HistoryState doesn't work well.

[nyngwang]

I'm thinking about this too. It would be acceptable for me not to support passing states through TSR only if this restriction/rule facilitates good design and/or avoids pitfalls in the long run.

I'm looking forward to the updates/insights regarding this. @hheavener-kyd @BrendanC23 @bingling0084 Did you find any workaround recently?

[hheavener-kyd]

@nyngwang I have not. It seems like @BrendanC23 is saying that the state property for routing is defined based on some sort of global HistoryState interface and I'm not too clear on how that works either. However, if this is the case, it falls short for me also because different routes would have different state needs for me. And I still don't see a way to access the state from the exported Route itself. In the version of the library I am working with which is ^1.12.12, I can only interact with the state property when using <Navigate /> or useNavigate but have no idea how to access it from the matched route after navigating.

[BrendanC23]

To use the router state, you need to declare its type. The type is global instead of being route-specific.

declare module "@tanstack/react-router" {
    interface HistoryState {
        // Your Types Here
    }
}

You can get the current state from

const routerState = useRouterState();
const state = routerState.location.state;

I ended up choosing to use search params and loader data instead of storing anything in state. It was convenient to store entire objects in state, but using a loader is better supported. Even though it's more work initially, it ends up being easier.

[hheavener-kyd]

@BrendanC23 thanks for posting this. Do you know if there is a parallel to the render={() => <Component />} from react-router in this library? The problem I ran into was needing to pass props to the component rendered by the route but wasn't able to do this successfully. Is there a way to do this with the loader or the loaderDeps?

I think that I wish I could do something like this:

navigate({ to: "/route", props: {...} })

Obviously, this doesn't exist, but maybe there is a way to pass information to the loader or the loader dependencies that I'm not seeing? I'd rather not use a global HistoryState for this since it's a route-specific thing I'm trying to do. Didn't know if you'd seen any way to accomplish this while you've worked with the library.

[jasonk]

For anyone else who ends up here trying to figure out how to use this like I did, this is what I was able to piece together...

Yes, if you want it to be typed you have to declare the types as a global, but you have to pass a property instead of the whole state anyway, so you can declare different properties for different uses..

declare module '@tanstack/react-router' {
  interface HistoryState {
    user?: MyUserType;
    project?: MyProjectType;
  }
}

To pass data to the route when navigating:

const navigate = useNavigate();
navigate( { to : '/user', state : { user : someUserData } } );

Note that you can't just use navigate( { to : '/user', state : someUserData } ); because the router adds a key property to the state, and if you try to do it like this, the state you get out will only have that key prop.

To read the data from the page you navigated to:

import { useRouterState } from '@tanstack/react-router';

export function UserRoute() {
  const routerState = useRouterState();
  const user = routerState.location.state.user;
}

[hheavener-kyd]

@jasonk thanks for sharing this. I hope this helps some people. I wish there were a different solution that didn't involve creating a bloated interface but maybe this solution will work for some.

[tannerlinsley]

It's slated in v2 to add support for typed state on a per route basis, similar to search params. It will have some interesting nature to it, given the nullability of basically all history state, but we 👀 you :)

[SalahAdDin]

I have an issue with it regarding to the types:

    navigate({
      to: '/edit/$id',
      params: { id: todo.id },
      state: { todo },
    })

Error:

Type '{ todo: Todo; }' is not assignable to type 'true | NonNullableUpdater<HistoryState> | undefined'.
  Property '__TSR_index' is missing in type '{ todo: Todo; }' but required in type 'HistoryState'.ts(2322)
index.d.ts(43, 5): '__TSR_index' is declared here.
link.d.ts(51, 5): The expected type comes from property 'state' which is declared here on type 'NavigateOptions<Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, () => { crumb: string; }, readonly [Route<RootRoute<undefined, {}, AnyContext, AnyContext, {}, () => { ...; }, unknown, unknown>, ... 11 more ..., unknown>, Route<...>], unknown>, ... 4 more ..., Record<...>>, string, "/edit/$id", string, "">'
#008060

I fixed by: state: { todo, __TSR_index: 0 },

Is it the best way?

[naoya7076]

To avoid router type definition bloat and support typed state on a per-route, I've created a Pull Request.
#3967

[tolu-c]

Thanks for this @jasonk