Reason React Router

This is project is based on the great old reroute module. It's just using the latest Reason React API (hooks & context).

Setup

Install the module :

1$ yarn add @dck/reason-react-navigation

Then add it to your bsconfig.json:

1{
2  "bs-dependencies": ["reason-react", "@dck/reason-react-navigation"]
3}

Usage

1open ReasonReactNavigation;
2
3module RouterConfig = {
4  type route =
5    | Home
6    | Hello(string)
7    | NotFound;
8
9  let routeFromUrl = (url: ReasonReact.Router.url) =>
10    switch (url.path) {
11    | [] => Home
12    | ["hello", name] => Hello(name)
13    | ["404"]
14    | _ => NotFound
15    };
16
17  let routeToUrl = (route: route) =>
18    switch (route) {
19    | Home => "/"
20    | Hello(name) => "/hello/" ++ name
21    | NotFound => "/404"
22    };
23};
24
25module Router = CreateRouter(RouterConfig);
26
27[@react.component]
28let make = () =>
29  <div>
30    <a href="#" onClick={e => {
31      event->ReactEvent.Synthetic.preventDefault;
32      Router.navigate(RouterConfig.Home)
33    }}>
34      "Home "->React.string
35    </a>
36
37    <a href="#" onClick={e => {
38      event->ReactEvent.Synthetic.preventDefault;
39      Router.navigate(RouterConfig.Hello("dck"))
40    }}>
41      "Hello DCK "->React.string
42    </a>
43    <Router.Provider>
44      ...{
45           (~currentRoute) =>
46             <p>
47               {
48                 (
49                   switch (currentRoute) {
50                   | RouterConfig.Home => "This is home"
51                   | RouterConfig.Hello(n) => "Hi " ++ n
52                   | _ => "404 not found"
53                   }
54                 )
55                 |> React.string
56               }
57             </p>
58         }
59    </Router.Provider>
60  </div>

Authentication example

Quick and dirty implementation :

1open ReasonReactNavigation;
2
3module Config = {
4  type route =
5    | Login
6    | Dashboard
7    | NotFound;
8
9  let routeToUrl = route =>
10    switch (route) {
11    | Login => "/login"
12    | Dashboard => "/dashboard"
13    | NotFound => "/404"
14    };
15  let routeFromUrl = (url: ReasonReact.Router.url) =>
16    switch (url.path) {
17    | ["login"] => Login
18    | ["dashboard"] => Dashboard
19    | _ => NotFound
20    };
21};
22
23module Router = CreateRouter(Config);
24
25[@react.component]
26let make = () => {
27  let (currentUser, setCurrentUser) = React.useState(() => None);
28
29  <Router.Provider>
30    {
31      (~currentRoute) =>
32        switch (currentRoute, currentUser) {
33        | (Config.Login, None) => <Login />
34        | (Config.Login, Some(_)) => <Redirect to_=Config.Dashboard />
35        | (route, Some(user)) =>
36          switch (route) {
37          | Config.Dashboard => <Dashboard user />
38          | _ => <NotFound />
39          }
40        | (Config.NotFound, _) => <NotFound />
41        | (_, None) => <Redirect to_=Login />
42        }
43    }
44  </Router.Provider>
45};