frontarm/navi

Unable to set route state

strass opened this issue · 4 comments

Love Navi, trying to use route state for the first time but it's not working like how I remember react router state.

I want to use route state for flash notifications but I'm not seeing it being set. I've tried both of these ways to set it:

navigation.navigate('/test', { state: { notification: 'test' } })
navigation.navigate({ url: { pathname: '/test' }, state: { notification: 'test' } })

This is the component I'm using to pick up the state and display a message, but I've never seen state being set to anything besides {}.

const FlashNotificationOrganism: FunctionComponent = () => {
  const currentRoute = useCurrentRoute();
  const navigation = useNavigation();
  const { url, state } = currentRoute;
  // When state changes, display notification then clear notification state
  useEffect(() => {
    const notification = state?.notification ?? undefined;  // always undefined
    if (notification) {
      message.info(notification); // yeah it's a weird but it's how antdesign messages work
      navigation.navigate(url, {
        state: { ...state, notification: undefined },
      });
    }
  }, [state]);
  return null;
};

Am I missing something?

I'm also trying to extend the typescript definitions... any guidance on how to set a local app state?

navi-config.d.ts

import * as navi from 'navi';

export interface EspressoRouteState {
  notification?: string | undefined;
}

declare module 'navi' {
  export interface NavigateOptionsWithoutURL {
    state?: EspressoRouteState;
  }
  export interface Route<Data = any> {
    state?: EspressoRouteState;
  }
}

I think I got it. currentRoute.state is always empty but navigation.extractState does provide the correct value

Navi state is a little up in the air at the moment. Originally, state was doing some funny things to allow data that was fetched on the server to be serialized and passed to the client, similar to Next's getInitialProps.

In Navi 1.0, I'm hoping to move to something a lot closer to react-router, where state behaves closer to how it would using the raw history API.

If anyone needs a state API that is closer to the metal before 1.0 is launched (which could take a while), I'd be happy to merge a PR and publish it as a minor release. If you're interested, let's start by discussing here.

I'd be interested just because I'd like to give back to this library. Is this something you think is fairly approachable?