The router that ships with ReasonReact is simple and flexible. Still, it would have helped me to see a complete working example. The blog posts I found (Routing in ReasonReact by Kyle Henderson and Routing in ReasonReact by A. Sharif) haven’t been updated since React Hooks were introduced.

I created the simplest example I could, using the router to switch between a few pages with a <nav>, which I guess I would call a “simulated multi-page application.”

You can see my deployed example application here. You can find the GitHub repo here.

The project has the following Reason files:

  1. — renders <App /> to #root
  2. — the shell component, uses ReasonReactRouter.useUrl() to display the correct page
  3. — renders text of “Home page”
  4. — renders text of “Second page”
  5. — renders text of “Third page”
  6. — contains a list of links to each page
  7. — makes use of ReasonReactRouter.push() on the clicked link

The key components are App and Link.

/* */

type route =
  | Home
  | Second
  | Third;

let make = () => {
  let url = ReasonReactRouter.useUrl();

    <Nav />
    {switch (url.path) {
     | [] => <Home />
     | ["second"] => <Second />
     | ["third"] => <Third />
     | _ => <Home />

The url variable in (holding the result of calling ReasonReactRouter.useUrl()) will change as the URL changes. url.path in the switch statement will be a list of of strings containing each segment of the URL path. So, for, it would be ["second"].

/* */

let handleClick = (href, _event) => {

let make = (~name, ~href) => {
  <a onClick={handleClick(href)}> {React.string(name)} </a>;

The Link component in my example takes two props, name and href (e.g. <Link href="/second" name="Second" />). When the resulting anchor tag is clicked, ReasonReactRouter.push() will navigate to the provided href prop.

In summary, I used ReasonReactRouter.useUrl() to watch URL changes, and a switch statement to display a component based on the current URL path. I created a simple navigation component and a custom link component that uses ReasonReactRouter.push() to change the page based on which link gets clicked.

Here’s a link to the router documentation page. Here’s a link to the ReasonReactRouter code on GitHub, which contains inline documentation.