<Navigate/>

Navigates to a new location from JSX. When it renders it calls navigate(path, props) and returns its children, so it works as a declarative redirect. Useful as the body of a fallback <Route>, or inside a <Show> to bounce the user when a condition is met.

All attributes are forwarded straight to navigate, so it accepts the same options — including delay, which lets the children show briefly (a "Redirecting…" notice) before the navigation fires.

Attributes

name	type	description
path	string	destination URL. Relative paths are resolved against the current location.
params?	Record<string, string>	replaces :name segments in path with their URI-encoded values, same as A/Route.
replace?	boolean	use history.replaceState so no new history entry is added (default false).
scroll?	boolean	scroll to the URL hash (if any) after navigating (default true — pass false to skip).
delay?	number	milliseconds to wait before navigating. Useful to show the children before redirecting.
children?	JSX.Element	content rendered in place during the navigation (for example a "Redirecting…" notice).

Examples

Redirect a removed page

Used as the body of a route, <Navigate> redirects as soon as the route matches. replace swaps the history entry so the old URL doesn't land in the back stack.

import { render } from 'pota'
import { Navigate, Route } from 'pota/components'

function App() {
	return (
		<div>
			<Route path="/old-page">
				<Navigate
					path="/new-page"
					replace={true}
				/>
			</Route>
			<Route path="/new-page">
				<h2>the new page</h2>
			</Route>
		</div>
	)
}

render(App)

Conditional redirect with a notice

Inside a <Show> fallback, <Navigate> bounces the user when a condition isn't met. delay keeps the children ("Redirecting…") visible for a moment before the navigation fires.

import { render, signal } from 'pota'
import { Navigate, Route, Show } from 'pota/components'

function App() {
	const loggedIn = signal(false)

	return (
		<div>
			<button on:click={() => loggedIn.write(true)}>log in</button>

			<Route path="/protected">
				<Show
					when={loggedIn.read}
					fallback={
						<Navigate
							path="/login"
							delay={1000}
						>
							Redirecting to login…
						</Navigate>
					}
				>
					<p>secret content</p>
				</Show>
			</Route>

			<Route path="/login">
				<p>please log in</p>
			</Route>
		</div>
	)
}

render(App)