JesusTheHun / storybook-addon-remix-react-router

Use your app router in your stories. A decorator made for Remix React Router and Storybook
Apache License 2.0
50 stars 12 forks source link

useNavigate not working correctly #75

Open JacobPotter opened 3 weeks ago

JacobPotter commented 3 weeks ago

Describe the bug What is supposed to happen ? What is happening instead ? When trying to invoke useNavigate in a story, the path is being appended to the original path instead of updating the path param.

For example, with the following meta, the story loads with a path of '/pokemon/1':

const meta = {
    component: PokemonPage,
    decorators: [withRouter],
    parameters: {
        reactRouter: reactRouterParameters({
            location: {
                pathParams: {id: '1'},
            },
            routing: {path: '/pokemon/:id'}
        }),
    },

} satisfies Meta<typeof PokemonPage>;

But when trying to update with use navigate like below:

 const {id} = useParams();
    const navigate = useNavigate();

    const [tabIndex, setTabIndex] = useState(0);

    const [{data, loading}, refetch] = useAxios<{ pokemon: Pokemon[] }>(
        '/api/v1/pokemon?pageSize=1500'
    )

    const handlePrev = () => {
        if (id && (parseInt(id) - 1) > 0) {
            navigate((parseInt(id) - 1).toString())
        }
    }

    const handleNext = () => {
        if (data?.pokemon && id && (parseInt(id) - 1) < data?.pokemon.length - 1) {
            navigate((parseInt(id) + 1).toString())
        }
    }

    const handlePokemonSelect = (index: number) => {
        navigate((index + 1).toString())
    }

it is just appending the updated id to the end of the path, like '/pokemon/1/2' which the router cannot find.

To Reproduce Describe all the steps required to reproduce the issue.

See above code

To help us resolve your issue more quickly, please fork the [https://stackblitz.com/edit/storybook-addon-remix-react-router](stackblitz project) to reproduce your issue.

Additional context Add any other context about the problem here.

Environment Share the output of the following command :

npx sb info

Storybook Environment Info:

  System:
    OS: macOS 14.1
    CPU: (11) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
  Browsers:
    Chrome: 130.0.6723.91
    Safari: 17.1
  npmPackages:
    @storybook/addon-essentials: ^8.3.6 => 8.3.6 
    @storybook/addon-interactions: ^8.3.6 => 8.3.6 
    @storybook/addon-links: ^8.3.6 => 8.3.6 
    @storybook/addon-onboarding: ^8.3.6 => 8.3.6 
    @storybook/blocks: ^8.3.6 => 8.3.6 
    @storybook/react: ^8.3.6 => 8.3.6 
    @storybook/react-vite: ^8.3.6 => 8.3.6 
    @storybook/test: ^8.3.6 => 8.3.6 
    eslint-plugin-storybook: ^0.10.1 => 0.10.1 
    msw-storybook-addon: ^2.0.3 => 2.0.3 
    storybook: ^8.3.6 => 8.3.6 
    storybook-addon-remix-react-router: ^3.0.1 => 3.0.1 
JesusTheHun commented 2 weeks ago

@JacobPotter Can you please provide a stackblitz with both the app implementation and the storybook ? So we can witness the difference in behavior ?