Gatsby: Organizing pages with react router

[shouichi]

Hi, I want to organize pages using react router e.g.,

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />

    <Route path="/weather/" component={Weather} />
    <Route path="/about/" component={About} />
  </Route>
</Router>

The problem is build fails because browserHistory can't be used on the server. How can I accomplish the goal?

BTW thanks for the awesome project!

[KyleAMathews]

Hey, with Gatsby, the React Router routing config is automatically created. You don't need to manually create routes and in fact can't (currently).

Look at the starters — none of them have routes setup. Routes are created from the position of a file. So if you have a file at /pages/weather.js a route will be created for it at /weather/.

[MoOx]

This is interesting. I am curious to know why you use react-router to make a file to url mapping. On the opposite, Phenomic currently allow you to use your own routes (and there is even a WIP to generate all routes like /tag/:tag, based on front matter tags for example).

[shouichi]

@KyleAMathews Thanks for the response. So, if I understand correctly Fig 1 and Fig 2 are equivalent?

Fig 1

/pages/_template.js
/pages/index.js
/pages/a.js
/pages/b.js

Fig 2

<Router history={browserHistory}>
  <Route path="/" component={Template}>
    <IndexRoute component={Index} />

    <Route path="/a/" component={A} />
    <Route path="/b/" component={B} />
  </Route>
</Router>

@MoOx No particular reason but I want more control of routing rather than depending on the convention. I'll checkout Phenomic. Thanks!

[KyleAMathews]

@shouichi yup!

@MoOx you like creating and maintaining route configurations? ;-)

[MoOx]

@KyleAMathews Currently Phenomic rely on a splat parameter to catch all routes and the mapping is done into the component that handle the data fetching (Phenomic does not put all content in the bundle by default).
But soon you will be able to this kind of mapping

const routes = (
  <Route component={ Noop }>
    <Route path="/author/:author" component={ Noop } />
    <Route path="/blog" component={ Noop }>
      <Route path="/category/:category" component={ Noop } />
      <Route path="/tag/:tag" component={ Noop } />
    </Route>
    <Route path="*" component={ Noop } />
  </Route>
)

test("routes to urls", (t) => {
  const urls = routesToUrls(routes, collection)

  t.deepEqual(
    urls,
    [
      "/author/Jack",
      "/author/James",
      "/author/John",
      "/blog",
      "/blog/category/Random",
      "/blog/category/Stuff",
      "/blog/category/Things",
      "/blog/tag/life",
      "/blog/tag/programming",
      "/blog/tag/puppy",
      "/one",
      "/two",
    ]
  )
})

[haraldur12]

How are we able to do routing with components then ? Do we precisely have to use pages folder or is it possible to tweak it somehow?

[KyleAMathews]

Yes, just add components or other supported file types to the pages directory and they'll become pages.

A new API was also just added a few days ago that let's you modify the autogenerated routes https://github.com/gatsbyjs/gatsby/pull/657

[AbhimanyuAryan]

@KyleAMathews that's a huge problem with Gatsby. We need more control with React

[vsahinid]

How are we able to add user JWT authentication without routing? If we have multiple users and go to www.mysite.com/dashboard and /dashboard is a protected route we can do this using React and Express but it can't be done with Gatsby/Netlify?