Dynamic Routes

AKA routes that look like

<Route path='posts/:id' component={Post} />

The issue

We need dynamic routes to support creating an entire category of sties including blogs. However currently we don’t have a way to turn something like posts/:id into a file directly. Normally we would have something like this:

posts/
  hellow-world.md
  second-post.md
  still-here.md

Which would generate the following HTML…

posts/
  hello-world.html
  second-post.html
  still-here.html

But in our case React Router has no way of knowing the contents of our posts/ directory so how would it know what files to generate?

Most static site generators would read the posts/ directory and then generate static sites from those files. However, that requires the user to either learn how to configure their generator or learn the conventions for creating dynamic content.

We could do the same thing:

fs.readdirSync('./posts').forEach(filename => {
  // 1. Read contents of file
  // 2. Generate a static HTML file for it
});

But then the user would have to know how to hook into this process. It is a first-class goal of this project to not force the user to learn some new technology. Just add this plugin to a webpack config and go. This is the issue I’d like to solve.

[iansinnott]

Hey @sidjain26 thanks for the ping. I haven’t looked at this issue in a while, because for whatever reason I haven’t yet run into the need for dynamic routes. I’ve been using this plugin extensively but it’s all been for sites without dynamic routing.

In my own minimal testing in the past the context approach actually worked quite well. it’s currently the option I favor because it is explicit and doesn’t require the user to know any special configuration—this is a first class goal of this project.

What’s also nice is that the require.context approach should work out of the box right now, because it doesn’t require any specific configuration within this plugin. It’s simply leveraging a feature of webpack. So although I don’t currently have a guide for how to do this it should be a viable option for anyone wanting to implement dynamic routes.

Once I rewrite my blog using this plugin I will definitely figure out how to do dynamic routing.

[iansinnott]

@lifeiscontent I’m not sure, but my guess is that Webpack has a i18n solution. Have you tried internationalizing a web app with webpack yet?