React.Router

class RoutePropsClass props arg | props -> arg where

The RoutePropsClass type class let one extend the properties passed to each RouteClass react class component. There is one instance RouteProps defined in the React.Router.Type module. The mkProps member function receives the name of the route and an nonempty array of args read from the url. You can use React.Router.Utils.last function to get the last element of the array with arguments obtained from the corrsponding url part.

Members

• idLens :: Lens' (props arg) String
• mkProps :: String -> arg -> List arg -> Map String String -> List (Cofree List { arg :: arg, url :: Route }) -> props arg

to :: String -> LinkProps

linkSpec :: RouterConfig -> ReactSpec LinkProps Unit ()

ReactSpec for the link element; it takes a record of type LinkProps as properties. The props record property is directly passed to underlying a element, e.g. this can be used to add css classes.

link' :: RouterConfig -> String -> Array ReactElement -> ReactElement

as link, but with empty properties passed to the underlying a element.

link :: RouterConfig -> LinkProps -> Array ReactElement -> ReactElement

link element; use it instead of a to route the user through application.

goTo :: forall eff. RouterConfig -> String -> Eff (console :: CONSOLE, dom :: DOM, history :: HISTORY | eff) Unit

browserRouterClass :: forall notfound arg props. RoutePropsClass props arg => RouterConfig -> ReactClass (RouterProps props arg notfound)

React class for the browerRouter element. Use it to init your application.

 router = ... :: Router _
 main = void $ elm >>= render (createElement browserRouterClass {router, notFound: Nothing} [])
   where
     elm = do
       elm_ <- window >>= document >>= getElementById (ElementId "app") <<< documentToNonElementParentNode <<< htmlDocumentToDocument
       pure $ unsafePartial fromJust (toMaybe elm_)
 ```

browserRouter :: forall notfound arg props eff. RoutePropsClass props arg => RouterConfig -> ReactSpec (RouterProps props arg notfound) RouterState (console :: CONSOLE, dom :: DOM, history :: HISTORY | eff)

ReactSpec for the browserRouterClass - the main entry point react class for the router.

runRouter :: forall arg props. RoutePropsClass props arg => String -> Cofree List (Tuple (Route props arg) (Maybe (IndexRoute props arg))) -> Maybe ReactElement

Main entry point for running Router, it returns ReactElement that can be injected into React vDOM.

matchRouter :: forall arg props. RoutePropsClass props arg => Route -> Router props arg -> Maybe (Cofree List (LeafVal props arg))

newtype RouterConfig

Constructors

• RouterConfig { baseName :: Maybe String }

Instances

• Newtype RouterConfig _

type Router props arg = RoutePropsClass props arg => Cofree List (Tuple (Route props arg) (Maybe (IndexRoute props arg)))

Router

router :: Router RouteProps Unit
router =
  Route "main" (unit <$ lit "") mainClass :+
    (Route "home" (unit <$ lit "home") homeClass :+ Nil)
    : (Tuple (Route "user" (unit <$ (lit "user" *> int)) userClass) (Just $ IndexRoute "user-index" userIndexClass) :<
        (Route "book" (unit <$ (lit "books" *> int)) bookClass :+
          (Route "pages" (unit <$ lit "pages") pagesClass :+
            (Route "page" (unit <$ int) pageClass :+ Nil)
            : Nil)
          : Nil)
        : Nil)
    : (Route "user-settings" (unit <$ (lit "user" *> int *> lit "settings")) settingsClass :+ Nil)
    : Nil

newtype RouteProps arg

RouteProps type keeps track route related data: id, currently matched argument and array of arguments - if the route is nested this will hold list of all parent arguments.

Constructors

• RouteProps { arg :: arg, args :: List arg, id :: String, query :: Map String String, tail :: List (Cofree List { arg :: arg, url :: Route }) }

Instances

• RoutePropsClass RouteProps arg
• Newtype (RouteProps arg) _

type RouteClass props arg = RoutePropsClass props arg => ReactClass (props arg)

React component which will be mounted at matching node It recieves array of all matching routes.

data Route props arg

Route type The first parameter is an identifier.

Constructors

• Route String (Match arg) (RouteClass props arg)

Instances

• Show (Route props arg)

data IndexRoute props arg

IndexRoute type The first parameter is the id property.

Constructors

• IndexRoute String (RouteClass props arg)

withoutIndex :: forall arg props. RoutePropsClass props arg => Route props arg -> List (Cofree List (Tuple (Route props arg) (Maybe (IndexRoute props arg)))) -> Cofree List (Tuple (Route props arg) (Maybe (IndexRoute props arg)))

urlLens :: forall arg props. RoutePropsClass props arg => Lens' (Route props arg) (Match arg)

defaultConfig :: RouterConfig

Operator alias for React.Router.Types.withoutIndex (right-associative / precedence 5)

:+ lets define routes without index route