Skip to content
Lightweight javascript routing library for single page applications
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Foxy Router

Lightweight javascript routing library for single page applications


* Express style route matching
* Bookmarking of links
* Uses the history api instead of hashes


ES6. Use babel if you would like support prior to ES6.

Quick Start

Registering a new route:

// This route will match a url like: /stocks/AAPL
FoxyRouter.add(`/stocks/:stock_symbol`, (parameters) => {
	let text = `You're viewing data for stock symbol: ${parameters.stock_symbol}`;
	document.getElementById(`page-container`).innerHTML = text;

Basic Route Paths

Paths can be any string along with regular expression patterns.

Route to the website index:

FoxyRouter.add(`/`, () => {
	document.getElementById(`page-container`).innerHTML = `This is the index`;

Route to the about page:

FoxyRouter.add(`/currency`, () => {
	document.getElementById(`page-container`).innerHTML = `This is the currency page`;

Route Parameters

Routes can also have dynamic parameters prefixed with a semicolon(:).

FoxyRouter.add(`/race_list/:race_id`, (parameters) => {
	// :race_id is the triathlon specified
	// e.g. /race_list/Dunedin

	let text = `You are viewing the ${parameters.race_id} triathlon`;
	document.getElementById(`page-container`).innerHTML = text;
FoxyRouter.add(`race_list/:race_id/:athlete`, (parameters) => {
	// e.g. /race_list/Dunendin/Will_Brock

	let text = `You are viewing the ${parameters.race_id} triathlon for ${parameters.athlete}`;
	document.getElementById(`page-container`).innerHTML = text;

Query Parameters

All query parameters are merged into the route parameters argument of the callback.

	// e.g /stocks/AAPL?timeframe=weekly&chart_type=candlestick
	FoxyRouter.add('/stocks/:stock_symbol', (parameters) => {
		let text = `Viewing ${parameters.stock_symbol}, timeframe: ${parameters.timeframe}, chart type: ${parameters.chart_type}.`;
		document.getElementById(`page-container`).innerHTML = text;

Route chaining

Adding new routes can be chained.

	.add(`/`, (parameters) => {

	.add(`/stocks`, (parameters) => {

	.add(`/bonds`, (parameters) => {



Multiple callbacks can be added for each route

	.add('/stocks', (parameters) => {
		console.log(`Callback 1 for /stocks`);
	}, () => {
		console.log(`Callback 2 for /stocks`);
You can’t perform that action at this time.