Search
Docs Menu
API
Get Started

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/ and index/ 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 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

Any directory inside parentheses such as (marketing) is ignored by Filesystem Routing. See also: API > Filesystem Routing > Ignored directories.

It enables you to set different configurations for different groups of pages:

pages/(marketing)/+Layout.js # The layout for all marketing pages
pages/(marketing)/index/+Page.js
pages/(marketing)/about/+Page.js
 
pages/admin-panel/+Layout.js # The layout for all admin pages
pages/admin-panel/index/+Page.js
pages/admin-panel/users/+Page.js

It's powered by config inheritance, see API > Config Files > Inheritance.

You can define two pages/ directories for 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

src/

You can define all 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: API > Filesystem Routing > Ignored directories.

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'
// /pages/product/+route.ts
 
// This file defines the route of /pages/product/+Page.ts
 
// Route String
export default '/product/@id'

The parameter id is available at pageContext.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
// Environment: server & client
 
// 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 } }
}
// /pages/product/edit/+route.ts
// Environment: server & client
 
// This file defines the route of /pages/product/edit/+Page.ts
 
import type { PageContext } from 'vike/types'
// 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: 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
// Environment: server
 
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.")
  }
}
// /pages/admin/+guard.ts
// Environment: server
 
import type { PageContextServer } from 'vike/types'
import { render } from 'vike/abort'
 
// This guard() hook protects all pages /pages/admin/**/+Page.ts
 
export async function guard(pageContext: PageContextServer) {
  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 supporting type safe links, 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:

See also