Routing

Overview of how to define the route of your pages.

Filesystem Routing

Vike supports Filesystem Routing: the URL of a page is determined by where the page is located on your filesystem.

FILESYSTEM                     URL
====================           ======
pages/index/+Page.js           /
pages/about/+Page.js           /about
pages/jobs/+Page.js            /jobs

The directories pages/, index/ and src/ are ignored.

Parameterized routes

You can define parameterized routes:

FILESYSTEM                     URL
========================       =======================
pages/movie/@id/+Page.js       /movie/1, /movie/2, ...

The parameter id is available at pageContext.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

The directory (marketing) is ignored because it's wrapped by parentheses.

Beyond improved organization, it allows you to apply different configurations to 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

See API > Config > Inheritance.

You can also have 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 Guides > File Structure > Domain driven.

More information

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 at pageContext.routeParams.id.

More information at:

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 } }
}

More information at:

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 > Inheritance.

More information at:

React Router / Vue Router

Although we usually don't recommend it, you can use Vike with React Router and Vue Router:

See also