Route doesn't get rendered when calling `navigate()`
See original GitHub issueCode:
<script lang="ts">
import { Route, Router, navigate } from "svelte-routing";
</script>
<main>
<button on:click={() => navigate("/")}>Home</button>
<button on:click={() => navigate("/foo")}>Foo</button>
<button on:click={() => navigate("/bar")}>Bar</button>
<Router>
<Route path="/foo">Foo</Route>
<Route path="/bar">Bar</Route>
<Route>Home</Route>
</Router>
</main>
<style>
</style>
Here, the Route corresponding to the browser url at the time of page load is correctly rendered.
When clicking any of the buttons, browser url changes, but the Router
still renders the old Route
.
Hitting F5 or entering the url in browser address bar and hitting enter causes the Route
to be rendered correctly.
Minimal repro: https://codesandbox.io/s/distracted-star-uhss6?file=/src/App.svelte:0-410
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
React router dom navigate method is not working properly
1 Answer 1 · useLocation hook to grab the current location user is attempting to access. · Outlet component for nested protected routes....
Read more >Navigating without the navigation prop
If you're unsure if a navigator is rendered, you can call navigationRef.current.getRootState() , and it'll return a valid state object if any navigators...
Read more >Programmatically navigate with React Router (and Hooks)
Let's get React Router setup, I'm importing components Hello and Goodbye to demonstrate how to handle navigating with hooks.
Read more >Introduction to react-router-dom: setting up your first routes
React JS as a Single Page App library doesn't include built-in routing capabilities as Angular does; it needs a library called ...
Read more >A Complete Guide to React Router: Everything You Need to ...
The mental model I use for Route is that it always has to render something – either its element prop if the path...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I went further down the rabbit hole and looks like this is a Vite dev server bug. https://github.com/vitejs/vite/issues/3155#issuecomment-826942131
Closing 😃
Also using the globalHistory doesn’t work for me in Vite. When I attach a listener to react on route changes it never gets called. It works for me using Rollup. I was unable to yet figure out why.