Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


timestamp downloads vulnerabilities version minified

Allows customized route configuration for Gatsby. Defining routes from configuration allows you to create pages from anywhere and with custom path.

Gives more control and helps with file structuring and naming because you don’t need to follow Gatsby’s default pages/ folder structure and naming convention to define new routes.


npm install --save gatsby-plugin-routes

How to use

Add the plugin to the plugins array in your gatsby-config.js. Then define path to your routes file with options.

options.path (required)

String path to the routes configuration file.

// In your gatsby-config.js
plugins: [
      resolve: `gatsby-plugin-routes`,
      options: {
        // this is the path to your routes configuration file
        path: `${__dirname}/src/routes.js`,

Routes -file

At routes configuration file you need to export an array of route objects. Every object in the route -array needs to have path and component fields defined.

path (required)

Path to the page where your defined view component is displayed.

component (required)

React component to be displayed in defined path.

// In your routes configuration file
const path = require('path');
module.exports = [
    path: '/',
    component: path.resolve(`src/containers/Home.jsx`)
    path: '/order',
    component: path.resolve(`src/containers/Order.jsx`)
    path: '/404/',
    component: path.resolve(`src/containers/404.js`)


All contributions and PR’s are welcome, but code needs to pass eslint with prettier!

Reporting issues will be greatly appreciated!

© 2023 Gatsby, Inc.