Routing

With Vike we have the choice between:

Server Routing and Client Routing.
Filesystem Routing, Route Strings and Route Functions.

Server Routing or Client Routing?

Vike has first-class support for both Server-side Routing (full HTML reload upon page navigation) and Client-side Routing (DOM mutations upon page navigation).

The guide Server Routing VS Client Routing helps you choose which one to use.

Route Strings & Route Functions

By default, Vike does Filesystem Routing:

FILESYSTEM                        URL
pages/index.page.js               /
pages/about.page.js               /about
pages/faq/index.page.js           /faq
pages/movie/@id/index.page.js     /movie/1, /movie/2, /movie/3, ...

We can also define so-called "Route Strings" and "Route Functions".

// /pages/product.page.route.js

// This file defines the route of `/pages/product.page.js`

// Route String
export default '/product/@productId'

The parameter productId is available at pageContext.routeParams.productId.

Route Functions give us full programmatic flexibility to implement advanced routing logic, for example route guards:

// /pages/product/edit.page.route.js

// This file defines the route of `/pages/product/edit.page.js`

import { resolveRoute } from 'vike/routing'

export default async (pageContext) => {
  // Ensure that `/product/@id/edit` can be accessed only by admins
  if (!pageContext.user.isAdmin) {
    return false
  }

  // We can use Vike's Route String resolver
  return resolveRoute('/product/@id/edit', pageContext.urlPathname)
}

React Router / Vue Router

See:

✍ Edit this page