Change route without <a> or full reload

[dikkadev]

Maybe there is something easy to specifically do this and I couldn't find it.
To explain, here is my use-case:

The page looks like this:

┌───────┬─────────┐
│ side  │  work   │
│  bar  │  space  │
└───────┴─────────┘

There are 2 routes that are important here:

• / shows the sidebar and workspace with empty/default fields
• /snippet/{id} shows sidebar and workspace loads data for the fields

When going with a <A> in the sidebar to each route, everything works nice as expected (just the workspace updates).

Now there is a way (button) to either save what's in the workspace, where we start out at / and should go to /snippet/{id} with an ID that we get back from a server function. Not knowing the ID in the client until the workspace is saved means I can't have an <A> as the button. I need a way to change the route without reloading the whole page (setting window.location does a reload). (PS: the sidebar is getting updated by just updating a signal).

There is also a way that goes in return, a delete button. Here we go from a /snippet/{id} back to /. That could probably be an <A>, for which I'd call preventDefault is the deleting errors.

All the route changes should of course only occur if the server function does not error.

I apologize for the lengthy explanation, but I'm not sure how else to convey what I'm looking for.

[gbj]

Here's an example of how to use use_navigate to navigate programmatically. I think the use_navigate docs and this example should be plenty to get started on what you're trying to do but feel free to ask if you need more help.

leptos/examples/router/src/lib.rs

Lines 195 to 210 in 39edb6e

	// use_navigate allows you to navigate programmatically by calling a function
	let navigate = use_navigate(cx);
	view! { cx,
	<>
	// note: this is just an illustration of how to use `use_navigate`
	// <button on:click> to navigate is an *anti-pattern*
	// you should ordinarily use a link instead,
	// both semantically and so your link will work before WASM loads
	<button on:click=move |_| { _ = navigate("/", Default::default()); }>
	"Home"
	</button>
	<h1>"About"</h1>
	<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
	</>
	}

[dikkadev]

Works perfectly, thank you!

[Miuler]

Please include the use of use_navigate in the official documentation, this function is widely used