Gracefully handle 404

[dev-yakuza]

First, thanks for making the great addon. 🙇

Error

Recently, I got the following error when I pressed the link component(react-router-dom).

Unexpected Application Error!
404 Not Found
💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

Expect

I hope the click action will be shown in the React Router tap without any error.

Repository

I make a repository about this error. So you can see the error when you run the repository.

• Repository: https://github.com/dev-yakuza/storybook-addon-react-router-v6-error

I executed the following commands to make the repository.

npx create-react-app error --template=typescript
npm install --save react-router-dom storybook storybook-addon-react-router-v6
npx storybook init

And modified the files.

• .storybook/main.ts

...
  addons: [
    ...
    'storybook-addon-react-router-v6',
  ],
...

• .storybook/preview.ts

import type { Preview } from '@storybook/react';
import { withRouter } from 'storybook-addon-react-router-v6';

const preview: Preview = {
  decorators: [withRouter],
  parameters: {
    ...
  },
};

I would really appreciate it if you could solve the problem or tell me how to solve it. 🙇

[JesusTheHun]

Hello @dev-yakuza , this has nothing to do with the addon. You navigate to a page that does not exists, so you get an error from react-router. Isn't it what you would expect ?

[dev-yakuza]

@JesusTheHun

Thanks for the quick response.

However, I got the error as follows.

The children props doesn't support the JSX. 🤔

[dev-yakuza]

@JesusTheHun

Hello @dev-yakuza , this has nothing to do with the addon. You navigate to a page that does not exists, so you get an error from react-router. Isn't it what you would expect ?

I expect it as follows.

https://github.com/JesusTheHun/storybook-addon-react-router-v6#dedicated-panel

I mean when I click the link, Navigate to object is shown on the React Router panel instead of navigating the the real page.

Before, I think this addon supports it. 🤔

[dev-yakuza]

@JesusTheHun

This is my old repository.

• https://github.com/dev-yakuza/deku-create-react-app-boilerplate/tree/040ab0d4f8563632e8f01439c1de0e0c2a5e3c2e

And I can get the Navigate to object without any error.

https://github.com/JesusTheHun/storybook-addon-react-router-v6/assets/42969906/2dfa7535-c29f-4935-8ef6-6990063e2b01

[JesusTheHun]

There was a lot of magic happening in v1. It created too much entropy and the add-on became unstable and hard to maintain.

For this reason I am very hesitant to add features that do thing on behalf of the user. If we manage to define a clear scope, I will be willing to add this feature.

My first thoughts are :

Implement a parameter defaultRouting. The defaultRouting will be merged with routing. It allows to set the default routing in preview.ts for example. From there we can offer a helper that return a catch all route that displays a simple component with a link to go back. It's simple and it does not impede user's configuration.

[adrianlegaspi]

@JesusTheHun Would be nice to have an usage of defaultRouting parameter. I haven't found it documented anywhere 🤔

[eloiqs]

Here is what I came up with

import { Link } from 'react-router-dom';
import {
  reactRouterParameters,
  type ReactRouterAddonStoryParameters,
} from 'storybook-addon-react-router-v6';

export const withDefaultRouting = (params: {
  routing: { path: string };
  location: ReactRouterAddonStoryParameters['location'];
}) => {
  return reactRouterParameters({
    location: {
      ...params.location,
      path: params.routing.path,
    },
    routing: [
      {
        path: params.routing.path,
        useStoryElement: true,
      },
      {
        path: '*',
        element: <Link to={params.routing.path}>404, Go back</Link>,
      },
    ],
  });
};

and then I just use that in my Story parameters like so

...
parameters: {
  reactRouter: withDefaultRouting({ routing: { path: '/some-path/:withParam' }, location: { 
pathParams: 'paramValue' } })
}

[EPurwanto]

I think what this really needs is just some examples of a story setup with navigation elements. I was running into this same issue when writing stories for a nav menu, just a simple sidebar with NavLinks that's shown on every page. Any time I clicked a link it would crash. It took me some testing to figure out what configuration I actually needed, and the documentation was not very helpful in this regard.

In the end I settled on this:

parameters: {
    reactRouter: reactRouterParameters({
      routing: {
        useStoryElement: true,
        path: "*",
      },
    }),
  },

I think a few example scenarios and their stories would be a big help for anyone using this plugin. Off the top of my head some useful candidates would be:

• A nav menu
• A component that links to a different path
• A component that renders different children based on the path

I'm happy to put together a pull request with these examples if I can figure out how to set them up.

[JesusTheHun]

@EPurwanto those examples are helpful indeed. It would be nice to also have a test to validate it works as expected. Is this something you can do ?

if I can figure out how to set them up

What do you need to figure out exactly ? I would be happy to help you with it.

[EPurwanto]

Last time I used React Router was v4, and Storybook was v6, so all of it lol. I'll basically be building all of those examples for work, so once I've done that I should be able to throw together some simple example stories. Probably in a week or so.

Can't promise unit tests with it, as I haven't done a lot of tests for frontend, but I'll see how I go.