react sproutReact Sprout

Navigation

There are 3 possible ways to navigate around: Links, Forms, and the navigate function.

The Link component is a more powerful alternative for the default anchor element.

import { Link } from 'react-sprout';

function Route() {
	return <Link href="/some/url">navigate</Link>;
}

Link element api

If you need a Link with loading states and navigation information, there is a useLink hook.

import { useLink } from 'react-sprout';

function Route() {
	let [Link, busy, loading, navigations] = useLink();

	return <Link href="/some/url">navigate</Link>;
}

useLink hook api

Forms

The Form component is a more powerful alternative for the default form element.

import { Form } from 'react-sprout';

function Route() {
	return (
		<Form action="/some/url">
			<button>navigate</button>
		</Form>
	);
}

Form element api

If you need a Form with loading states and navigation information, there is a useForm hook.

import { useForm } from 'react-sprout';

function Route() {
	let [Form, busy, loading, navigations] = useForm();

	return (
		<Form action="/some/url">
			<button>navigate</button>
		</Form>
	);
}

useForm hook api

For navigating programmatically, there is a useNavigate hook.

If you need to navigate as a response to a user click, using a Link or Form is preferred.

import { useNavigate } from 'react-sprout';

function Route() {
	let [navigate, busy, loading, navigations] = useNavigate();

	useEffect(() => {
		let timer = setTimeout(() => {
			navigate('/some/url');
		}, 5000);

		return () => {
			clearTimeout(timer);
		};
	}, []);
}

useNavigate hook api