Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to set route state #170

Open
strass opened this issue Jan 24, 2020 · 4 comments
Open

Unable to set route state #170

strass opened this issue Jan 24, 2020 · 4 comments

Comments

@strass
Copy link
Contributor

strass commented Jan 24, 2020

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?

@strass
Copy link
Contributor Author

strass commented Jan 27, 2020

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;
  }
}

@strass
Copy link
Contributor Author

strass commented Jan 27, 2020

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

@jamesknelson
Copy link
Collaborator

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.

@strass
Copy link
Contributor Author

strass commented Mar 30, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants