vaadin
Ui.getCurrent().navigate() does not change Browser URL
Description of the bug
Based on provided forum post https://vaadin.com/forum/t/ui-getcurrent-navigate-does-not-change-browser-url/167788/1.
Hi. After upgrading from 24.4.12 to 24.5.4 i have the problem, that the Browser URL does not change when UI.getCurrent().navigate() is called. The content and page title are set but the url stays the same. Eg. i am currently on a view with route “/alldashboards”. There is a grid and on item click UI.getCurrent().navigate(“dashboard/” + item.getId()) is called. Navigation itself seems to work, since title and content are set, but the url stays “/alldashboards”. Disabling the react router in the application properties did in fact solve the problem. We had the problem with any call of navigate(). Calling navigateToClient() instead worked fine, but since this needs a lot of code changes, we stick with disabling the react router.
To be investigated and reproduced.
Expected behavior
URL should change.
Minimal reproducible example
No. A first try could be to run 24.4.12 app, upgrade to 24.5.4, then run it without any cleanup.
Versions
- Vaadin / Flow version: 24.5.4
Tested on Flow starter project, upgrading from Vaadin 24.4.12 to 24.5.4 and 24.5.5. Works as expected, the URL in the browser changes on navigation.
@Route("alldashboards")
@AnonymousAllowed
public class AllDashboards extends VerticalLayout {
public AllDashboards() {
Grid<Integer> grid = new Grid<>();
grid.addColumn(id -> "Dashboard " + id).setHeader("ID");
grid.addItemClickListener(ev -> {
UI.getCurrent().navigate("dashboard/" + ev.getItem());
});
grid.setItems(IntStream.rangeClosed(1, 10).boxed().collect(Collectors.toList()));
add(grid);
}
}
@Route("dashboard")
public class Dashboard extends Div implements HasUrlParameter<Integer> {
private final Span text = new Span();
public Dashboard() {
add(text);
add(new RouterLink("All dashboards", AllDashboards.class));
}
@Override
public void setParameter(BeforeEvent beforeEvent, Integer integer) {
text.setText("Welcome to dashboard " + integer.toString());
}
}
Have you done any cleanup? The culprit here is some leftover files after 24.4.12 that prevents it working with 24.5.
Nope, cloned the repo, added sample code, set version to 24.4.12, started the project and checked navigation worked, then bumped to 24.5.5, started and checked again.
Tested upgrade also with a custom bundle, but I'm still not able to reproduce
Tried with the https://github.com/vaadin/crm-tutorial and the following codes:
ListView
List<String> items = Lists.newArrayList("one", "two", "three", "four");
Grid<String> grid = new Grid<>();
grid.setItems(items);
grid.addColumn(item -> item).setHeader("Items");
grid.addItemClickListener(event -> {
String item = event.getItem();
UI.getCurrent().navigate("/dashboard/" + item);
});
add(grid);
DashboardView
public class DashboardView extends VerticalLayout implements HasUrlParameter<String> {
@Override
public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
if (parameter == null) {
add(new Div("Welcome anonymous."));
} else {
add(new Div(String.format("Welcome %s.", parameter)));
}
}
}
Couldn't reproduce, not with bundle, nor with Vite dev server.
If someone has a reliable reproducible steps please comment here, else I'm closing this ticket.
I have the same issue. For me, the browser address bar gets updated in production mode but not in development mode. I don't have a reproducible example, unfortunately. But I was wondering if the cases above were tested in development mode as well?
I tested it in development mode. Can you please check if you have a custom dev bundle in src/main/bundles folder? If so, try deleting it and restart the application
I just tried running production mode locally and it was still not updating the address bar. It does work correctly in production mode in the remote deployed environment. I wonder what differences could be causing this.
Could someone please add instructions on how to disable the React router?
I can confirm that opting out of React fixes my problem as well. Specifically I added this to my Spring properties:
vaadin.react.enable=false
So I think there is a bug somewhere but unfortunately I don't have time to reduce my giant project to a minimal reproducible example.
Also to add, in my case event.forwardTo(<path>) had the same issue as navigateTo()
Did you perhaps checked and tried to clean the src/main/bundles folder before switching to Vaadin router?
Re-tested in production mode, but always got updated browser URL. I didn't clean the bundles folder.
I had the same issue after upgrade from Vaadin 24.5.5 to 24.6.2.
The workaround worked for me:
vaadin.react.enable=false
I wonder if we have some recent change that could have affected this issue? I started seeing this this in my app recently. Might be that something else (than version upgrade) I did lately contributed to the bundle so that react is again on even though I opted out 🤔 Need to investigate at some point.
Update while writing the report: The vaadin.react.enable=false in application.properties workaround seems to fix this for me as well. I had react disabled in the maven plugin, but that apparently is not enough, at least anymore.
Like others above, I'm unable to reproduce the issue, possibly it was flaky or not an issue for the latest version.
