reason-navigation
Install
yarn install reason-navigationbsconfig
"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 ]))
}Navigation Components
<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 history: Router.history href: string target: string />
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;}