tldr: The app redirects / -> /home, but now /home has been moved to /auth/home, and the new redirect won't work.
On a previous version of my app, I had a file structure like this:
src/routes/
├── +error.svelte
├── +layout.server.js
├── +layout.svelte
├── (main)
│ ├── home
│ │ ├── +page.server.js
│ │ └── +page.svelte
│ ├── +layout.server.js
│ ├── +layout.svelte
│ ├── MainSideBar.svelte
│ └── online
│ └── [suc]
│ ├── +page.server.js
│ └── +page.svelte
├── +page.server.js
Where the /src/routes/+page.server.js contents were:
import { redirect } from '@sveltejs/kit';
export function load() {
redirect(308, '/home');
}
So basically, When the server got a request for '/', it would redirect the browser to '/home'.
Eventually, I created more routes, changed the file structure, and added hooks to protect some routes. Now the file structure looks like this:
src/routes/
├── auth
│ ├── +layout.server.js
│ ├── +layout.svelte
│ ├── (main)
│ │ ├── home
│ │ │ ├── +page.server.js
│ │ │ └── +page.svelte
│ │ ├── +layout.server.js
│ │ ├── +layout.svelte
│ │ ├── MainSideBar.svelte
│ │ └── online
│ │ └── [suc]
│ │ ├── +page.server.js
│ │ └── +page.svelte
│ └── wiki
│ ├── [category]
│ │ └── [slug]
│ │ ├── +page.server.js
│ │ └── +page.svelte
│ ├── +layout.server.js
│ ├── +layout.svelte
│ ├── +page.svelte
│ └── SideNavigation.svelte
├── +error.svelte
├── +layout.svelte
├── login
│ ├── +page.server.js
│ └── +page.svelte
├── logout
│ └── +page.server.js
└── +page.server.js
Where /src/routes/+page.server.js now has:
import { redirect } from '@sveltejs/kit';
export function load() {
redirect(308, '/auth/home');
}
And the src/hooks.server.js file has this:
import { redirect } from '@sveltejs/kit';
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
const authToken = event.cookies.get('authToken');
if (event.url.pathname.startsWith('/auth')) {
if (!authToken) {
const redirectTo = event.url.pathname + event.url.search;
redirect(303, `/login?redirect=${redirectTo}`);
}
}
event.locals.token = authToken;
const response = await resolve(event);
return response;
}
But the redirect keeps going from / to /home, except now /home doesn't exist. I don't understand what is happening. It's like the dev server is using a previous version of the router. What can I do to make the new redirect work?
I changed the redirect inside /src/routes/+page.server.js to use the new /auth/home route, but the app keeps going to /home, I also tried using goto instead of redirect, but it didn't work either.
UPDATE:
Emptying cache fixed the problem. On firefox I had to go to the network tab in the developer tools and check the "Disable cache" option. After the page loaded correctly, I unchecked it and the redirect kept working as intended.
I have had the exact same problem. The problem is that the web browser caches the redirect. Delete the cache, and it will hopefully work after that. You can use another web browser (that hasn't cached the redirect) to verify that this is the problem you're having.