gatsby-plugin-dynamic-routes

    1.0.0 • Public • Published

    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

    Recommended plugins

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

    Install

    npm i gatsby-plugin-dynamic-routes

    DownloadsWeekly Downloads

    336

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • luanbitar