12
34%
MIT
reason navigation

reason-navigation

Install

yarn install reason-navigation

bsconfig

"bs-dependencies": [
  "reason-react",
  "reason-navigator"
]

Example

  • RE
  • ML
let component = ReasonReact.statelessComponent("App");

let make = (_children) => {
  ...component,
  render: (_self) =>
    <Router>
      (
        (match) =>
          <div>
            <h1> (U.se("Reason Router")) </h1>
            <Link match href="/game"> (U.se("GAME")) </Link>
            <Route match path="/" render=(() => <Landing match />) />
            <Route match path="/game" render=(() => <Canvas match />) />
            <Route
              match
              path="/re/:id"
              render=(
                () => {
                  switch (Match.getInt(match.state.params, "id")) {
                  | Some(v) => Js.log(v)
                  | None => Js.log("None")
                  };
                  <p> (ReasonReact.stringToElement("Query params!")) </p>
                }
              )
            />
            <Route match path="/highscores" render=(() => <HighScore match />) />
          </div>
      )
    </Router>
};
let component = ReasonReact.statelessComponent "App"
let make _children =
  {
    component with
    render =
      (fun _self  ->
         ((Router.createElement
             ~children:[(fun match_  ->
                           ((div
                               ~children:[((h1
                                              ~children:[U.se "Reason Router"]
                                              ())[@JSX ]);
                                         ((Link.createElement ~match:match_
                                             ~href:"/game"
                                             ~children:[U.se "GAME"] ())
                                         [@JSX ]);
                                         ((Route.createElement ~match:match_
                                             ~path:"/"
                                             ~render:(fun ()  ->
                                                        ((Landing.createElement
                                                            ~match:match_
                                                            ~children:[] ())
                                                        [@JSX ]))
                                             ~children:[] ())[@JSX ]);
                                         ((Route.createElement ~match:match_
                                             ~path:"/game"
                                             ~render:(fun ()  ->
                                                        ((Canvas.createElement
                                                            ~match:match_
                                                            ~children:[] ())
                                                        [@JSX ]))
                                             ~children:[] ())[@JSX ]);
                                         ((Route.createElement ~match:match_
                                             ~path:"/re/:id"
                                             ~render:(fun ()  ->
                                                        (match Match.getInt
                                                                 (match_.state).params
                                                                 "id"
                                                         with
                                                         | ((Some
                                                             (v))[@explicit_arity
                                                                   ])
                                                             -> Js.log v
                                                         | None  ->
                                                             Js.log "None");
                                                        ((p
                                                            ~children:
                                                            [ReasonReact.stringToElement
                                                               "Query params!"]
                                                            ())[@JSX ]))
                                             ~children:[] ())[@JSX ]);
                                         ((Route.createElement ~match:match_
                                             ~path:"/highscores"
                                             ~render:(fun ()  ->
                                                        ((HighScore.createElement
                                                            ~match:match_
                                                            ~children:[] ())
                                                        [@JSX ]))
                                             ~children:[] ())[@JSX ])] ())
                           [@JSX ]))] ())[@JSX ]))
  }

<Router children: (history) => ReasonReact.element/>

Router takes a function as a child, with a parameter that is passed a history object. The body should be a single reason-react component, like a <div /> that wraps a bunch of child <Route /> components.

<Route history: Router.history path: string render: unit => ReasonReact.element />

Route needs to be passed the Router.history record that contains data in order to determine whether it should render on a certain path or not. It also requires a path that the route needs to match against, and lastly a render function that passes query params and other data that is useful.

Link needs to be passed the Router.history record that contains actions to update the browser location. It also takes an href to determine where to go when the link is pressed. and lastly takes a target to determine where to open the link.

Query Params

When accessing query params, you should use the query accessors that reason-navigation provides.

getInt(params: Js.Dict.t(string), field: string) => option(int)

It will return Some(int) if they field you are accessing is present and an int.

  • RE
  • ML
switch (Match.getInt(match.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};
let _ =
  match Match.getInt (match_.state).params "id" with
  | ((Some (v))[@explicit_arity ]) -> Js.log v
  | None  -> Js.log "None"

getString(params: Js.Dict.t(string), field: string) => option(string)

It will return Some(string) if they field you are accessing is present and an string.

  • RE
  • ML
switch (Match.getString(match.state.params, "id")) {
| Some(v) => Js.log(v)
| None => Js.log("None")
};
let _ =
  match Match.getString (match_.state).params "id" with
  | ((Some (v))[@explicit_arity ]) -> Js.log v
  | None  -> Js.log "None"

Types

Router.state

  • RE
  • ML
type state = {
  path: string,
  search: string,
  hash: string,
  params: Js.Dict.t(string),
  unlisten: [@bs] (unit => unit)
};
type state =
  {
  path: string;
  search: string;
  hash: string;
  params: string Js.Dict.t;
  unlisten: ((unit -> unit)[@bs ]);}

Router.actions

  • RE
  • ML
type actions = {
  push: string => unit,
  replace: string => unit,
  updateMatch: (string, string, Js.Dict.t(string)) => unit
};
type actions =
  {
  push: string -> unit;
  replace: string -> unit;
  updateMatch: string -> string -> string Js.Dict.t -> unit;}

Router.history

  • RE
  • ML
type history = {
  state,
  actions
};
type history = {
  state: state;
  actions: actions;}