Creating a Custom Router with React and the History API

This article was originally published on bmf-tech.com . Overview Preparation First, let's understand the History API. GO TO MDN. MDN - History MDN - Manipulating the Browser History For those in a hurry, just understanding pushState and window.popstate should suffice. Specifications This router will support the following URLs: /post /post/:id /post/:id/:title It does not support query parameters. Packages Used We will skip the React-related packages. There is only one package used besides React: pillarjs/path-to-regexp This package helps with regular expressions for the URL part. I would like to write my own regular expressions eventually, but for now, I will rely on this package. Implementation Create Components for Navigation and Pages Prepare components corresponding to navigation and the pages. src/ ├── App.js ├── Dashboard.js ├── Home.js ├── Post.js └── Profile.js Implement Routing Now, let's implement the routing. We will prepare two components: Router and Route . Router is the c