Accessing directly an url is cool, but only when you know it! It would be nice
to have a list of existing pages (in our case,
posts). So let's add an index
For this we will need to wrap our
Home with a container like for
The difference here is that we are going to make a query an entire path.
const HomeContainer =;
It's easier than before, same
query, but without
Now we need to change our route to use
HomeContainer instead of
<Router history=browserHistory><Route path="/" component=HomeContainer /><Route path="/blog/*" component=BlogPostContainer /></Router>;
Maybe you noticed that we actually didn't use our resources in our
component? Let's display the list of posts with this change
;// ..const Home =<div><h1>Home</h1>isLoading && "Loading..."!isLoading &&<ul>posts &&postsnode &&postsnodelist &&postsnodelist</ul></div>;
Now your homepage should render a list with your single post. But wait, the
label being used is the
id?! This can be improved by adding meta data into
your markdown file.
At the top of each markdown file, we can add "front-matter" in a section
separated by 3 dashes,
---. You can store anything you want in there. It's by
default a YAML section,
but you can use
Let's modify our file with a
title property. And while we are editing this
file, we can also add a
---title: "First post"date: "2017-01-01"---# This is a file...
Now, check out your homepage, you should see the title. Keep in mind that this front-matter can contains all kind of informations like date, authors name, tags, image reference etc. By default some keys are automatically interpreted as way to query your content. This allows you to query posts for a single author, a specific tag and even order by date.