Simple ReasonReact Router Example

App.re

let component = ReasonReact.statelessComponent("App");
let make = (_children) => {
  ...component,
  render: (_self) =>
    <div className="app">
    <View.Nav></View.Nav>
    <Router.WithRouter>
      ...(
        (~currentRoute) =>
          switch currentRoute {
            | Home => <View.Home />
            | About => <View.About />
            | _ => <View.NotFound />
          }
      )
    </Router.WithRouter>
    </div>
}

Config.re

type routes =
  | Home
  | About
  | NotFound;

let stringToRoutes =
  fun
  | "Home" => Home
  | "About" => About
  | "NotFound" => NotFound;

let routeToString =
  fun
  | Home => "/public/"
  | About => "/public/about"
  | NotFound => "/public/404";

let urlToRoute: ReasonReact.Router.url => routes =
  url =>
    switch url.path {
    | [] => Home
    | ["about"] => About
    | _ => NotFound
  };

Router.re

module WithRouter = {
  type state = {currentRoute: Config.routes};
  type action =
    | ChangeUrl(Config.routes);

  let component = ReasonReact.reducerComponent("WithRouter");
   let make:
    ((~currentRoute: Config.routes) => ReasonReact.reactElement) =>
    ReasonReact.component(state, _, action) =
    children => {
      ...component,
      initialState: () => {
        currentRoute:
          ReasonReact.Router.dangerouslyGetInitialUrl() |> Config.urlToRoute
      },
      reducer: (action, _state) =>
        switch action {
        | ChangeUrl(route) => ReasonReact.Update({currentRoute: route})
      },
      subscriptions: ({send}) => [
        Sub(
          () =>
            ReasonReact.Router.watchUrl(url =>
            send(ChangeUrl(url |> Config.urlToRoute))
          ),
          ReasonReact.Router.unwatchUrl
        )
      ],
      render:({state}) => children(~currentRoute=state.currentRoute)
    };
};


module Link = {
  let component = ReasonReact.statelessComponent("Link");
  let make = (~text, _children) => {
    ...component,
    render: self => {
      let href = Config.routeToString(Config.stringToRoutes(text));
      <a href=(href) onClick=(self.handle((event, _self) => {
        ReactEventRe.Mouse.preventDefault(event);
        ReasonReact.Router.push(href);
      }))>
        (ReasonReact.stringToElement(text))
      </a>
    }
  }
}

View.re

module Nav = {
  let component = ReasonReact.statelessComponent("Nav");
  let make = _children => {
    ...component,
    render: _self =>
      <ul>
        <li>
          <Router.Link text="Home"/>
        </li>
        <li>
          <Router.Link text="About"/>
        </li>
      </ul>
  }
};

module Home = {
  let component = ReasonReact.statelessComponent("Home");
  let make = _children => {
    ...component,
    render: _self =>
      <div>
        (ReasonReact.stringToElement("Home"))
      </div>
  }
};

module About = {
  let component = ReasonReact.statelessComponent("About");
  let make = _children => {
    ...component,
    render: _self =>
      <div>
        (ReasonReact.stringToElement("About"))
      </div>
  }
};

module NotFound = {
  let component = ReasonReact.statelessComponent("NotFound");
  let make = _children => {
    ...component,
    render: _self =>
      <div>
        (ReasonReact.stringToElement("404 - Not Found"))
      </div>
  }
};