Splats
Splats can be used in the route configuration to match anything. It is a widcard written as an asterisk, and will match all the remaining segments of the url.
let Router = Routes(
<App>
<File path="files/*">
</App>,
)
Urls like /files/images/image-001.jpg
or /files/documents/reports/2024/05/11
will match the general form /files/*
and the router will render both urls with this layout
<App>
<File>
</App>
The splat will be accessible inside the route components with the useSplat hook.
import { useSplat } from 'react-sprout'
function App() {
let splat = useSplat() // ['files', 'documents', 'reports', '2024', '05', '11']
...
}
function File() {
let splat = useSplat() // ['documents', 'reports', '2024', '05', '11']
...
}
Note that the splat is always availabe for every route component to inspect the remaining parts of the url. Even though in the configuration the splat is only used on the File
route.
Also note that the splat is different for these route components. The App
route did not define any url segments, so everything in the url is regarded as the rest of the url, and will show up in the splat of the App
component. The File
route did define files
as part of the url before the splat, so that will not be included in the rest of the url, and will not show up in the splat of the File
component.