Need help with navigation

[adrian-novacescu]

Hi,
I am sorry for bothering you with this issue but I tried a lot to fix it myself and it didn't work.

I have two components: A list and an edit page. When I select an element from a list I need to navigate to that page.

My code is:

const List = () => {
  const navigate = useNavigate();
  return (
    <ul>
      <li
        onClick={() => {
          navigate('edit/book1');
        }}
      >
        book1
      </li>
    </ul>
  );
};

const Edit = () => {
  const params = useParams();
  return <div>Edit book with id {params}</div>;
};

const meta: Meta<typeof List> = {
  component: List,
  title: 'components/Library Management/views',
};

export const BooksManagement: StoryObj<typeof List> = {
  parameters: {
    reactRouter: reactRouterParameters({
      routing: {
        path: 'library/management',
        useStoryElement: true,
        children: [
          {
            path: 'edit/:bookId',
            Component: () => <Edit />,
          },
        ],
      },
    }),
  },
};

export default meta;

With this last version my story does not even load. I get Error: Missing ":bookId" param.

Sorry for formatting. It looks ok in edit mode but after saving it.

Looking forward to your answer,
Thanks a lot in advance,
Adi