SolidStart with manually navigation?

[tdt-dung]

Hello everyone!

In SolidStart app, how can I manually redirect to a specific route using useNavigate or redirect? I don't know how to find that out.

Please help, thanks in advance!

[birkskyum]

const navigate = useNavigate()
navigate("/page/5")

[tdt-dung]

Thanks, but i got an error.

[birkskyum]

Right, so the syntax is right, it's just executed the wrong place in your app, since it's working routing it has to be under the Router.

When you have a router, like this:

export default function App() {
	return (
		<Router
			root={(props) => (
				<ThemeToggler>
					<Suspense>
						<SessionProvider>
						        <Nav /> // <- You can i.e. use it in this component. It It just has to be within the `<Router />.
						
							<div class="d-flex flex-column" style={{ height: "100%" }}>
								{props.children}
							</div>
						</SessionProvider>
					</Suspense>
				</ThemeToggler>
			)}
		>
			<FileRoutes />
		</Router>
	);
}

[tdt-dung]

I did the same but it still doesn't work:

// src/routes/index.tsx
export default function App() {

	return (
		<Router
			root={ ( props ) => (
				<MetaProvider>
					<Title>Title</Title>
					<section class="bg-[#f7f7f7] app-layout">
						<Suspense>{ props.children }</Suspense>
					</section>
				</MetaProvider>
			) }
		>
			<FileRoutes />
		</Router>
	);

}

What I want to do is after a successful login, the app automatically redirects to another route (e.g. "/" -> "/dash") rather than clicking a or A tag in Navbar component manually.

I'm using a server action with Valibot to check if the data from the login form is valid or not:

// src/actions/sign-in/index.tsx
"use server";

import { flatten, safeParse } from "valibot";
import { SignInSchema } from "@/libs/schemas";

export type SignInResponseType = {
    status: "" | "success" | "fail",
    error: {
        username: string | undefined,
        password: string | undefined
    }
};

export const SignInServerAction = async ( formData: FormData ) => {

    const
        data: { [ key: string ]: FormDataEntryValue; } = Object.fromEntries( formData.entries() ),
        result = safeParse( SignInSchema, data );

    if( result.success ) {
        const response: SignInResponseType = {
            status: "success",
            error: {
                username: "",
                password: ""
            }
        };

        return response;
    }
    else {
        const
            issues = flatten<typeof SignInSchema>( result.issues ),
            error: SignInResponseType = {
                status: "fail",
                error: {
                    username: issues.nested?.username?.[0],
                    password: issues.nested?.password?.[0]
                }
            };

        return error;
    }

};

// src/routes/dash/index.tsx
import { SignInServerAction, SignInResponseType } from "@/actions/sign-in";
...
        const
		SignInAction = async ( event: Event ) => {

			event.preventDefault();

			const
				form = event.target as HTMLFormElement,
				formData: FormData = new FormData( form ),
				result: SignInResponseType = await SignInServerAction( formData );

			setActionResponse( {
				status: result.status,
				error: {
					username: result?.error.username,
					password: result?.error.password
				}
			} );

			const navigate = useNavigate();
			navigate( "/dash" ); // <-- Here, this will throw the error.

		};
...