🔍Search
📚 Docs Menu
🌱 Get Started

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 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/ and index/ are ignored by Filesystem Routing.

+ files are explained at API > Config Files > + files.

For detailed information about Filesystem Routing, see API > Filesystem Routing.

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.

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

See API > Config Files > Inheritance.

src/

If you prefer, you can define your files within a src/ directory:

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

The directory src/ is ignored by Filesystem Routing.

The directory src/ isn't ignored by config inheritance: make sure to define all your + files inside src/.

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

If you aren't familiar with file structures, see File Structure.

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