- Notifications
You must be signed in to change notification settings - Fork0
React bindings for Ultra router
License
gt3/react-ultra
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Provides ancillary components to useUltra in React apps.
<Ultra />- creates Ultra container and provides it to children via context.<Use />- dynamically adds and removes route configuration (matchers) as the component mounts and unmounts.<A />- creates an anchor link element to trigger pushstate.
| download | dependencies |
|---|---|
0.9 kb | ultra, react, prop-types |
Quick example to demonstrate code splitting (webpack dynamic import) withreact-ultra components.
// app.jsimport{Ultra,A}from'react-ultra'import{spec,match}from'ultra'letdynamicImport=()=>import(/* webpackChunkName: "news" */'./news')letNews,Nav,App,renderApp,rootMatchNav=()=><div><Ahref="/news">news home</A><Ahref="/news/sports">sports</A><Ahref="/news/politics">politics</A></div>App=({ path}={})=>{letshowNews=path&&path.indexOf('/news')===0if(showNews&&!News){dynamicImport().then(module=>{News=module.defaultrenderApp({ path})})}return(<Ultramatchers={rootMatch}dispatch={false}><Nav/>{showNews&&News ?<News/> :null}</Ultra>)}renderApp=route=>React.render(<App{...route}/>,document.getElementById('root'))rootMatch=match([spec('/news')(renderApp),spec('/')(renderApp)])renderApp()
app.js is our entry point where we render the<App /> component with<Nav /> links on the page. We use<Ultra /> to initialize the router container with root level matches. We use<A /> to create anchor links to navigate to the news section.
News module is loaded dynamically using webpack import on/news path hit. The<News /> component mounts once the module is loaded.
// news.jsimport{Use}from'react-ultra'import{spec,match}from'ultra'letnext,newsMatch,Newsnext=route=>console.log('news section: ',route.path)newsMatch=match([spec('/news/sports')(next),spec('/news/politics')(next)])News=()=><div><h1>News Home</h1><Usematchers={newsMatch}dispatch={true}/></div>exportdefaultNews
The<News /> componentprepends its matchers to the router by rendering<Use />. It adds the news section matchers on mount and removes on unmount.
Try out code samples here:ultra router examples.
MIT
About
React bindings for Ultra router