Client side routing

client/app.re

@@ -1,4 +1,28 @@
+let home = () => Routes.(nil); // '/'
+let hello = () => Routes.(s("hello") /? nil); // /hello
+
+let homeRoute = Routes.(home() @--> (() => print_endline("in home page")));
+let helloRoute = Routes.(hello() @--> (() => print_endline("in hello view")));
+
+let routes = Routes.one_of([homeRoute, helloRoute]);
+
+module Main = {
+  [@react.component]
+    let make = () => {
+      let target =
+        ReasonReactRouter.useUrl().path
+      |> String.concat("/");
+      switch (Routes.match'(routes, ~target)) {
+      | Routes.FullMatch(e) => e()
+      | Routes.MatchWithTrailingSlash(e) => e()
+      | Routes.NoMatch => ()
+      };
+      <Reason_india_website_js.App />;
+    }
+};
+
 switch (ReactDOM.querySelector("#root")) {
-| Some(el) => ignore @@ ReactDOM.Client.hydrateRoot(el, <Reason_india_website_js.App />)
+| Some(el) =>
+  ReactDOM.Client.createRoot(el)->ReactDOM.Client.render(<Main />)
 | None => ()
 };

client/dune

@@ -1,7 +1,7 @@
 (melange.emit
  (alias client)
  (target app)
- (libraries melange reason_india_website_js reason-react)
+ (libraries routes melange reason_india_website_js reason-react)
  (preprocess
   (pps reason-react-ppx melange.ppx))
  (module_systems commonjs))

lib/js/dune

@@ -3,6 +3,8 @@
  (modes melange)
  (libraries styled-ppx.css styled-ppx.emotion melange reason-react)
  (preprocess
-  (pps styled-ppx melange.ppx reason-react-ppx)))
+  (pps
+    server-reason-react.browser_ppx -js
+    styled-ppx melange.ppx reason-react-ppx)))
 
 (copy_files# "../native/*.re")

lib/native/Link.re

@@ -0,0 +1,11 @@
+[@alert "-all--all+browser_only"];
+let%browser_only handleLinkAnchorOnClick = (href, e) => {
+  React.Event.Mouse.preventDefault(e);
+  ReasonReactRouter.push(href);
+};
+
+
+[@react.component]
+let make = (~href, ~children) => {
+  <a onClick={handleLinkAnchorOnClick(href)} href> {children} </a>;
+};

lib/native/app.re

@@ -16,9 +16,12 @@ module Container = [%styled.section
 
 [@react.component]
 let make = () => {
+  let hey = React.string("hey");
   let (count, setCount) = useState(0);
   <Container blah=`flex>
+    <Link href="/hello">{React.string("to hello")}</Link>
     <section className="centered">
+      <p>{switch(true) { | true => hey | false => React.string("false")}}</p>
       <section>
         {React.string(" clicked " ++ Int.to_string(count) ++ " times")}
       </section>

lib/native/dune

@@ -3,9 +3,11 @@
  (libraries
    styled-ppx.emotion_native
    styled-ppx.css_native
+   routes
    server-reason-react.react
    server-reason-react.reactDom)
  (preprocess
   (pps styled-ppx --native
+       server-reason-react.browser_ppx
        server-reason-react.melange_ppx
        server-reason-react.ppx)))