ReasonReactRouter state

1

I am building a very basic authentication flow using ReasonReactRouter.
I need to redirect unauthenticated users to the login page along with a flash message (common name in backend frameworks), you can usually do this using react-router state property in <Links> docs.

I found that ReasonReactRouter.push(string) doesn’t have this capacity, it only accepts the path.

What would be you recommend to pass/show this flash message?

Forgot to add what I have right now:

module PrivateRoute = {
  @react.component
  let make = (~children) => {
    switch Dom.Storage.localStorage |> Dom.Storage.getItem("session") {
    | Some(_) => children
    | _ => {
        Js.log("Invalid token. This incident will be reported")
        ReasonReactRouter.push("/")
        React.null
      }
    }
  }
}

module Main = {
  @react.component
  let make = () => {
    let url = ReasonReactRouter.useUrl()

    switch url.path {
    | list{} => <Login.Login />
    | list{"dashboard"} => <PrivateRoute> <Dashboard /> </PrivateRoute>
    | _ => React.null
    }
  }
}

Thanks!

2

One solution would be using React.Context just for these flash messages, but I would rather solve it with the router itself.

3

It’s not applicable to all the cases but in case of login redirect you should be saving redirect path somewhere. So you can check if it’s there, it means user was redirected -> show message.

Also you can use url hash for simple cases.

4

The hash, completely forgot about it.
I think it is fine in this case, although I like to keep my URLs clean.

Thanks!