Routing
Overview of how to define the URL of your pages.
Filesystem Routing
Vike supports Filesystem Routing: the URL of a page is determined by its location on your filesystem.
For example:
FILESYSTEM URL
==================== ======
pages/index/+Page.js /
pages/about/+Page.js /about
pages/jobs/+Page.js /jobs
Vike always skips the
pages/
andindex/
directories when determining the URL.
+
files are explained at: API > Config Files >+
files
For more details, see:
Parameterized routes
FILESYSTEM URL
======================== =======================
pages/movie/@id/+Page.js /movie/1, /movie/2, ...
The parameter
id
is available atpageContext.routeParams.id
.
Groups
You can organize your pages into groups:
FILESYSTEM URL
================================ ==================
pages/(marketing)/index/+Page.js /
pages/(marketing)/about/+Page.js /about
pages/admin-panel/index/+Page.js /admin-panel
pages/admin-panel/users/+Page.js /admin-panel/users
Any directory inside parentheses such as
(marketing)
is ignored by Filesystem Routing.
It also enables you to easily set different configurations for different pages:
# Define a layout for all marketing pages
pages/(marketing)/+Layout.js
pages/(marketing)/index/+Page.js
pages/(marketing)/about/+Page.js
# Define a layout for all admin pages
pages/admin-panel/+Layout.js
pages/admin-panel/index/+Page.js
pages/admin-panel/users/+Page.js
Config inheritance is explained at: API > Config Files > Inheritance
See also:
src/
You can also define your files within a src/
directory:
FILESYSTEM URL
======================== ======
src/pages/index/+Page.js /
src/pages/about/+Page.js /about
Vike always skips the
src/
directory when determining the URL.
See also:
Domain-driven file structure
For advanced apps, you may want to consider a domain-driven file structure.
# Domain: marketing
(marketing)/pages/+Layout.js
(marketing)/pages/index/+Page.js
(marketing)/pages/about/+Page.js
(marketing)/components/ContactUs.js
# Domain: admin panel
admin-panel/pages/+Layout.js
admin-panel/pages/index/+Page.js
admin-panel/pages/users/+Page.js
admin-panel/components/Charts.js
admin-panel/database/fetchUsers.js
See also:
Route String
Instead of Filesystem Routing, you can define a Route String.
// /pages/product/+route.js
// This file defines the route of /pages/product/+Page.js
// Route String
export default '/product/@id'
The parameter
id
is available atpageContext.routeParams.id
.
For more information, see:
Route Function
You can use Route Functions to get full programmatic flexibility for advanced routing logic.
// /pages/product/edit/+route.js
// This file defines the route of /pages/product/edit/+Page.js
// We use a RegExp, but we could as well use a routing library.
import partRegex from 'part-regex'
const routeRegex = partRegex`/product/${/([0-9]+)/}/edit`
// Route Function
export function route(pageContext) {
const match = pageContext.urlPathname.match(routeRegex)
if (!match) return false
const [, id] = match
return { routeParams: { id } }
}
For more information, see:
Route Guards
You can use a guard()
hook to protect pages from unauthorized/unexpected access.
// /pages/admin/+guard.js
import { render } from 'vike/abort'
// This guard() hook protects all pages /pages/admin/**/+Page.js
export async function guard(pageContext) {
if (!pageContext.user.isAdmin) {
throw render(401, "You aren't allowed to access this page.')
}
}
This
guard()
hook applies to all pages living at/pages/admin/**/*
, see API > Config Files > Inheritance.
For more information, see:
TypeScript
There is work-in-progress for adding type safety to routes, see #698 Typesafe Links.
React Router / Vue Router
Although we usually don't recommend it, you can use Vike with React Router and Vue Router: