New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Organizing pages with react router #320

Closed
shouichi opened this Issue Jun 9, 2016 · 7 comments

Comments

Projects
None yet
4 participants
@shouichi

shouichi commented Jun 9, 2016

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

This comment has been minimized.

Contributor

KyleAMathews commented Jun 9, 2016

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 comment has been minimized.

MoOx commented Jun 9, 2016

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

This comment has been minimized.

shouichi commented Jun 10, 2016

@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

This comment has been minimized.

Contributor

KyleAMathews commented Jun 10, 2016

@shouichi yup!

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

@MoOx

This comment has been minimized.

MoOx commented Jun 10, 2016

@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

This comment has been minimized.

haraldur12 commented Feb 9, 2017

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

This comment has been minimized.

Contributor

KyleAMathews commented Feb 9, 2017

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 #657

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment