Params of type json are not deserialized properly

[lukasjusko]

Using param of type json is causing error Unexpected token % in JSON at position 0.

Steps to reproduce:

• Scaffold application with CRA npx create-react-app router-json-issue --template typescript --use-npm
• install "@uirouter/react": "^1.0.3",
• use code below

index.tsx:

const states = [
    {
        name: "home",
        url: "/home?{filter:json}",
        component: App,
        params: {
            filter: {
                value: {
                    resourceType: "bucket",
                },
            },
        },
    },
];

const plugins = [pushStateLocationPlugin];

ReactDOM.render(
    <React.StrictMode>
        <UIRouter plugins={plugins} states={states}>
            <UIView />
        </UIRouter>
        ,
    </React.StrictMode>,
    document.getElementById("root")
);

App.tsx:

function App() {
    const { stateService } = useRouter();

    const onClickHandler = () => {
        stateService.go("home", {
            filter: {
                resourceType: "vm",
            },
        });
    };

    return <button onClick={onClickHandler}>click me</button>;
}

When using a button in App.tsx to navigate to a different state with updated filter, it ends up on proper URL http://localhost:3000/home?filter=%7B%22resourceType%22%3A%22vm%22%7D , but following error is in error console:

SyntaxError: Unexpected token % in JSON at position 0
    at JSON.parse (<anonymous>)
    at common.ts:317
    at Array.forEach (<anonymous>)
    at _forEach (common.ts:562)
    at map (common.ts:317)
    at ArrayType.handleArray [as decode] (paramType.ts:128)
    at urlMatcher.ts:436
    at Array.forEach (<anonymous>)
    at UrlMatcher.exec (urlMatcher.ts:431)
    at BaseUrlRule.matchUrlParamters [as match] (urlRule.ts:101)
    at checkRule (urlService.ts:153)
    at UrlService.match (urlService.ts:166)
    at UrlService.sync (urlService.ts:70)
    at urlService.ts:108
    at baseLocationService.ts:57
    at Array.forEach (<anonymous>)
    at PushStateLocationService.BaseLocationServices.url (baseLocationService.ts:57)
    at UrlService.url (urlService.ts:228)
    at UrlRouter.push (urlRouter.ts:65)
    at updateUrl (url.ts:24)
    at invokeCallback (transitionHook.ts:143)
    at TransitionHook.invokeHook (transitionHook.ts:152)
    at transitionHook.ts:114
    at Array.forEach (<anonymous>)
    at TransitionHook.runAllHooks (transitionHook.ts:114)
    at transitionSuccess (transition.ts:782)

Same error occurs if I try to reload the page with param filter in the URL.

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions!

[stale]

This issue has been automatically closed.

[christopherthielen]

https://stackblitz.com/edit/ui-router-react-issue-671?file=index.tsx

[christopherthielen]

I believe this is fixed in @uirouter/core 6.0.6. I'll release a new @uirouter/react that pulls in that version.

[christopherthielen]

Fixed in https://github.com/ui-router/react/releases/tag/1.0.4