- 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
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.