Skip to main content
View plugin on GitHub
See starters using this

Version Downloads Total

gatsby-plugin-dynamic-routes

Use one file to declare your routes, provides to chose dynamic route paths based on your BUILD_ENV or ROUTE_ENV to your custom routing env. Also it’s possible to only renaming routes on pages/, or use everything together.

Install

$ npm i gatsby-plugin-dynamic-routes

or

$ yarn add gatsby-plugin-dynamic-routes

How to use

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [
    `gatsby-plugin-dynamic-routes`
  ]
}

Create your’s Routes.js inside your src/ folder

project/
β”œβ”€β”€ src/
  └── Routes.js

Routes.js

module.exports = {
  home: {
    path: `/casa`,
    component: `src/pages/Home.js`
  }
}

Use in client-side, include globals comment

component/Example.js

import { Link } from "gatsby"

function Example() {
  return <Link href="/casa" />
}

Dynamic routes

Routes.js

module.exports = {
  development: {
    two: {
      path: `/2`,
      component: `src/pages/Two.js`
    }
  },
  staging: {
    two: {
      path: `/dois`,
      component: `src/pages/Two.js`
    }
  },
  home: {
    path: `/casa`,
    component: `src/pages/Home.js`
  }
}

Run with your BUILD_ENV environment

BUILD_ENV=staging yarn start

If you are using the plugin Dynamic Environment Variables, what will happen is that your environments inside your .env and .env.staging will be loaded, and your routes inside staging key will go to root of the object that is exported of Routes and will be available in yours global environment variables.

component/Example.js

import { Link } from "gatsby"
/* globals ROUTES */

function Example() {
  return <Link href={ROUTES.two.path} />
}

You can pass more than path or component keys, these keys will be available in your component later

Variations

If you want to made variations of the same environment, but whit different routes, you can use ROUTE_ENV variable to chose your dynamic routes

example

ROUTE_ENV=organic BUILD_ENV=production yarn build

Options

routeFilePath

This options allows you to specify what’s the path to your file with your Routes object

Example:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-dynamic-routes`,
      options: {
        routeFilePath: `config/Routes.js`
      }
    }
  ]
}
project/
β”œβ”€β”€ config/
  └── Routes.js

If you want to put in root of your project, simply put the name of your file

Check out the Dynamic Environment Variables plugin that provides you to load different files based on your env variables