Params

Parameters can be used in the route configuration to match urls with dynamic values. A parameter starts with a colon and defines a placeholder in the url for a value.

let Router = Routes(
	<App path=":language">
		<Todo path="todos/:todoId">
	</App>,
)

Urls like /en/todos/1 and /fr/todos/42 will both match the general form /:language/todos/:todoId and the router will render both urls with this layout

<App>
	<Todo>
</App>

The parameter names, as defined in the configuration, and their extracted values will be accessible inside the route components with the useParams hook.

import { useParams } from 'react-sprout'

function App() {
	let { language } = useParams()
		...
}

Each route component also has access to the parameters of parent routes.

import { useParams } from 'react-sprout'

function Todo() {
	let { language, todoId } = useParams()
		...
}