React Router Full Page Load while clicking link in dialog

knoobie commented 4 days ago

Description of the bug

When I click a RouterLink within a Dialog I expect that the already rendered MainLayout is shown / preserved and no white background / full page reload happens.

Expected behavior

No full page load.

Minimal reproducible example

https://drive.google.com/file/d/1Pb2Rm-7CZPKU0HwGtYdvbNJheXPa0l2W/view?usp=sharing

I’ve added coloring and thread.sleep to make the problem more obvious.

Clicking the link in the MainView: ok Clicking the link in the Dialog of the MainView: not okay

Versions

Vaadin / Flow version: 24.4.3

AlainaFaisal commented 4 days ago

This problem might be occurring because when a RouterLink is used inside a dialog, it tries to navigate as if it's part of the main layout, which is not fully compatible with how dialogs handle their content. Dialogs are generally meant for small, self-contained interactions and are not designed to handle navigation or the lifecycle of routing in the same way as components directly managed by the router. You can try to change the RouterLink to a Button and manually handle the navigation. This can prevent the default routing behavior that causes the full page reload.

For example this way: ` Button button = new Button("Click me to open dialog with link", event -> {

  Dialog dialog = new Dialog();
  dialog.add(new Button("Navigate to Other View", e -> {
    UI.getCurrent().navigate(OtherView.class);
    dialog.close(); // Close the dialog upon navigation
  }));

  dialog.setHeaderTitle("Moin");
  dialog.open();

});`

knoobie commented 4 days ago

You are new, so you don't know the full picture here. RouterLink have to work in dialog: see https://github.com/vaadin/flow/issues/13270

vaadin / flow