Add missing trailing slashes to links and URLs

gatsby-node.js

@@ -1,7 +1,7 @@
 const React = require("react")
 const path = require("path")
 const slugify = require("slugify")
-const { paginate } = require("gatsby-awesome-pagination")
+const { paginate } = require("@decimoseptimo/gatsby-awesome-pagination")
 
 const {
   getParentRecursively,
@@ -70,11 +70,12 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     itemsPerPage: 50,
     // itemsPerFirstPage: 3,
     pathPrefix: "/",
+    trailingSlash: true
   })
 
   products.forEach(({ node }) => {
     createPage({
-      path: node.slug,
+      path: node.slug + '/',
       component: productView,
       context: {
         // Data passed to context is available
@@ -125,6 +126,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         productsCount: products.length,
       },
       pathPrefix: `/${slugify(i.name.toLowerCase())}`,
+      trailingSlash: true
     })
   }
 
@@ -138,6 +140,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         tag: tag.fieldValue,
       },
       pathPrefix: `/tags/${slugify(tag.fieldValue.toLowerCase())}`,
+      trailingSlash: true
     })
   })
 }

package.json

@@ -5,8 +5,8 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "@decimoseptimo/gatsby-awesome-pagination": "^0.3.6-b",
     "gatsby": "^2.29.2",
-    "gatsby-awesome-pagination": "^0.3.6",
     "gatsby-image": "^2.8.0",
     "gatsby-plugin-favicon": "^3.1.6",
     "gatsby-plugin-local-search": "^2.0.0",

src/components/breadcrumbs.js

@@ -12,7 +12,7 @@ const Breadcrumbs = ({ data }) => (
         </span>
         {data.map((i) => (
           <span className="item" key={i._id}>
-            <Link to={`/${slugify(i.name.toLowerCase())}`}>{i.name}</Link>
+            <Link to={`/${slugify(i.name.toLowerCase())}/`}>{i.name}</Link>
           </span>
         ))}
       </div>

src/components/sidepanel/panels/categories.js

@@ -46,7 +46,7 @@ const Categories = () => {
 
   const ItemLink = ({ name, className='' }) => (
     <Link
-      to={`/${slugify(name.toLowerCase())}`}
+      to={`/${slugify(name.toLowerCase())}/`}
       replace
       className={className}
       activeClassName="active"

src/templates/categoryView.js

@@ -20,17 +20,17 @@ const CategoryView = (props) => {
   const subcategories2 = (
     <div className="subcategories">
       {subcategories.map((i) => (
-        <SubcategoryLink to={`/${slugify(i.name.toLowerCase())}`} key={i._id}>
+        <SubcategoryLink to={`/${slugify(i.name.toLowerCase())}/`} key={i._id}>
           {i.name}
         </SubcategoryLink>
       ))}
     </div>
   )
 
-  const handlePageChange = (e, d) => {
-    d.activePage === 1
-      ? navigate(`/${slugify(category.name.toLowerCase())}`)
-      : navigate(`/${slugify(category.name.toLowerCase())}/${d.activePage}`)
+  const handlePageChange = (page) => {
+    page === 1
+      ? navigate(`/${slugify(category.name.toLowerCase())}/`)
+      : navigate(`/${slugify(category.name.toLowerCase())}/${page}/`)
   }
 
   return (

src/templates/productIndex.js

@@ -9,7 +9,7 @@ const ProductIndex = (props) => {
   const products = props.data.allProductsJson.edges
 
   const handlePageChange = (page) => {
-    page === 1 ? navigate(`/`) : navigate(`/${page}`)
+    page === 1 ? navigate(`/`) : navigate(`/${page}/`)
   }
 
   return (