Skip to content
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 · 9 comments
Closed

Organizing pages with react router #320

shouichi opened this issue Jun 9, 2016 · 9 comments

Comments

@shouichi
Copy link

@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
Copy link
Contributor

@KyleAMathews 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
Copy link

@MoOx 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
Copy link
Author

@shouichi 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
Copy link
Contributor

@KyleAMathews KyleAMathews commented Jun 10, 2016

@shouichi yup!

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

@MoOx
Copy link

@MoOx 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
Copy link

@haraldur12 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
Copy link
Contributor

@KyleAMathews 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

@AbhimanyuAryan
Copy link

@AbhimanyuAryan AbhimanyuAryan commented Nov 20, 2018

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

@vsahinid
Copy link

@vsahinid vsahinid commented Feb 5, 2019

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants