ReScript Router

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

Checkout this simple demo

Setup

Install the module :

1$ yarn add @dck/rescript-router

Then add it to your bsconfig.json:

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

Usage

Create your configuration

1open RescriptRouter
2
3module RouterConfig = {
4  type t =
5    | Home
6    | About
7    | Hello(string)
8    | NotFound
9
10  let make = (url: RescriptReactRouter.url) =>
11    switch url.path {
12    | list{} => Home
13    | list{"about"} => About
14    | list{"hello", name} => Hello(name)
15    | list{"404"}
16    | _ =>
17      NotFound
18    }
19
20  let toString = (route: t) =>
21    switch route {
22    | Home => "/"
23    | About => "/about"
24    | Hello(name) => "/hello/" ++ name
25    | NotFound => "/404"
26    }
27}
28
29module Router = CreateRouter(RouterConfig)

Add the Provider

1module App = {
2  @react.component
3  let make = () =>
4    <Router.Provider>
5      {(~currentRoute) => <>
6        <div className="container mx-auto p-4">
7          <h1 className="text-xl font-semibold text-center mb-4 text-blue-700">
8            {"RescriptRouter example"->React.string}
9          </h1>
10          <div className="flex flex-row items-center mb-4">
11            <CustomLink route=RouterConfig.Home> {"Home"->React.string} </CustomLink>
12            <CustomLink route=RouterConfig.About> {"About"->React.string} </CustomLink>
13            <CustomLink route={RouterConfig.Hello("dck")}>
14              {"Route with params"->React.string}
15            </CustomLink>
16          </div>
17          {switch currentRoute {
18          | RouterConfig.Home => <h1> {"Home"->React.string} </h1>
19          | RouterConfig.About => <h1> {"About"->React.string} </h1>
20          | RouterConfig.Hello(name) =>
21            <div>
22              <h1> {"Route with params"->React.string} </h1>
23              <p> {("Hi : " ++ name)->React.string} </p>
24            </div>
25          | _ => <h1> {"404 not found"->React.string} </h1>
26          }}
27        </div>
28      </>}
29    </Router.Provider>
30}

Use built-in Link module

Don't forget to use it inside the Provider 😉

1module CustomLink = {
2  @react.component
3  let make = (~route: RouterConfig.t, ~children) => {
4    <Router.Link
5      className="rounded block px-3 py-2 bg-gray-200 mr-2 hover:bg-gray-300"
6      activeClassName="bg-blue-500 text-white hover:bg-blue-600"
7      route>
8      children
9    </Router.Link>
10  }
11}

Full example

1open RescriptRouter
2
3module RouterConfig = {
4  type t =
5    | Home
6    | About
7    | Hello(string)
8    | NotFound
9
10  let make = (url: RescriptReactRouter.url) =>
11    switch url.path {
12    | list{} => Home
13    | list{"about"} => About
14    | list{"hello", name} => Hello(name)
15    | list{"404"}
16    | _ =>
17      NotFound
18    }
19
20  let toString = (route: t) =>
21    switch route {
22    | Home => "/"
23    | About => "/about"
24    | Hello(name) => "/hello/" ++ name
25    | NotFound => "/404"
26    }
27}
28
29module Router = CreateRouter(RouterConfig)
30
31module CustomLink = {
32  @react.component
33  let make = (~route: RouterConfig.t, ~children) => {
34    <Router.Link
35      className="rounded block px-3 py-2 bg-gray-200 mr-2 hover:bg-gray-300"
36      activeClassName="bg-blue-500 text-white hover:bg-blue-600"
37      route>
38      children
39    </Router.Link>
40  }
41}
42
43module App = {
44  @react.component
45  let make = () =>
46    <Router.Provider>
47      {(~currentRoute) => <>
48        <div className="container mx-auto p-4">
49          <h1 className="text-xl font-semibold text-center mb-4 text-blue-700">
50            {"RescriptRouter example"->React.string}
51          </h1>
52          <div className="flex flex-row items-center mb-4">
53            <CustomLink route=RouterConfig.Home> {"Home"->React.string} </CustomLink>
54            <CustomLink route=RouterConfig.About> {"About"->React.string} </CustomLink>
55            <CustomLink route={RouterConfig.Hello("dck")}>
56              {"Route with params"->React.string}
57            </CustomLink>
58          </div>
59          {switch currentRoute {
60          | RouterConfig.Home => <h1> {"Home"->React.string} </h1>
61          | RouterConfig.About => <h1> {"About"->React.string} </h1>
62          | RouterConfig.Hello(name) =>
63            <div>
64              <h1> {"Route with params"->React.string} </h1>
65              <p> {("Hi : " ++ name)->React.string} </p>
66            </div>
67          | _ => <h1> {"404 not found"->React.string} </h1>
68          }}
69        </div>
70      </>}
71    </Router.Provider>
72}
73

Run demo

Install dependencies

yarn

Compiles ReScript files

yarn start

Run webpack-dev-server

yarn demo

Go to http://localhost:8000