Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
flux-router-component
Advanced tools
flux-router-component - npm Package Compare versions
Comparing version 0.5.10 to 0.5.11
@@ -77,3 +77,12 @@ /** | ||
| if (this._hasPushState) { | ||
| win.history.pushState.apply(win.history, arguments); | ||
| try { | ||
| // not calling pushState(state, title, url), because | ||
| // some browsers update url with '/undefined' if url is undefined | ||
| win.history.pushState.apply(win.history, arguments); | ||
| } catch (error) { | ||
| // firefox 35 requires 3 args for pushState | ||
| if (arguments.length < 3) { | ||
| win.history.pushState(state, title, url); | ||
| } | ||
| } | ||
| } else if (url) { | ||
@@ -94,3 +103,12 @@ win.location.href = url; | ||
| if (this._hasPushState) { | ||
| win.history.replaceState.apply(win.history, arguments); | ||
| try { | ||
| // not calling pushState(state, title, url), because | ||
| // some browsers update url with '/undefined' if url is undefined | ||
| win.history.replaceState.apply(win.history, arguments); | ||
| } catch (error) { | ||
| // firefox 35 requires 3 args for replaceState | ||
| if (arguments.length < 3) { | ||
| win.history.replaceState(state, title, url); | ||
| } | ||
| } | ||
| } else if (url) { | ||
@@ -97,0 +115,0 @@ win.location.replace(url); |
| { | ||
| "name": "flux-router-component", | ||
| "version": "0.5.10", | ||
| "version": "0.5.11", | ||
| "description": "Router-related React component and mixin for applications with Fluxible architecture", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
130
README.md
@@ -28,136 +28,12 @@ # flux-router-component | ||
| [//]: # (API_START) | ||
| ## NavLink | ||
| `NavLink` is the a React component for navigational links. When the link is clicked, NavLink will dispatch `NAVIGATE` action to flux dispatcher. The dispatcher can then dispatch the action to the stores that can handle it. | ||
| ### Example Usage | ||
| [Docs](https://github.com/yahoo/flux-router-component/blob/master/docs/navlink.md) | ||
| Here are two examples of generating `NavLink` using `href` property, and using `routeName` property. Using `href` property is better than using `routeName`, because: | ||
| * Using `href` makes your code more readible, as it shows exactly how the `href` is generated. | ||
| * Using `routeName` assumes `this.context` or `this.props.context` has a `makePath()` function, which will be used to generate the `href` from the `routeName` and `navParams` props. | ||
| * Using `routeName` could be more limited, especially when it comes to query string and hash fragment, if the `makePath()` function does not support query string and hash fragment. | ||
| #### Example of Using `href` Property (Recommended) | ||
| If the url is static, or you can generate the url outside of `Navlink`, you can simply pass the url to `NavLink` as a prop. Here is an example: | ||
| ```js | ||
| var NavLink = require('flux-router-component').NavLink; | ||
| var Nav = React.createClass({ | ||
| render: function () { | ||
| // This example is using this.props.context for Nav and NavLink components. | ||
| // You can also use the React context, as described in the Context section of this doc. | ||
| var pages, | ||
| links, | ||
| context = this.props.context; | ||
| pages = [ | ||
| { | ||
| name: 'home', | ||
| url: '/home', | ||
| text: 'Home' | ||
| }, | ||
| { | ||
| name: 'about', | ||
| url: '/about', | ||
| text: 'About Us' | ||
| } | ||
| ]; | ||
| links = pages.map(function (page) { | ||
| return ( | ||
| <li className="navItem"> | ||
| <NavLink href={page.url} context={context}> | ||
| {page.text} | ||
| </NavLink> | ||
| </li> | ||
| ); | ||
| }); | ||
| return ( | ||
| <ul className="nav"> | ||
| {links} | ||
| </ul> | ||
| ); | ||
| } | ||
| }); | ||
| ``` | ||
| #### Example of Using `routeName` Property | ||
| Before you continue with this example, you should know that you can always generate the url yourself outside of `NavLink` and pass it to `NavLink` as `href` prop just like the example above. Your code will be more straight-forward that way, and you will have more control over how to generate `href` (see more explanations in [the Example Usage section](#example-usage)). | ||
| If you choose not to generate `href` yourself and the `context` prop you pass to `NavLink` provides `makePath(routeName, routeParams)`, you can also use the `routeName` prop (and the optional `navParams` prop). If the `href` prop is not present, `NavLink` will use `makePath(this.props.routeName, this.props.navParams)` from either `this.context` or `this.props.context` to generate the `href` for the anchor element. The `navParams` prop is useful for dynamic routes. It should be a hash object containing the route parameters and their values. | ||
| Here is a quick example code showcasing how to use `routeName` prop along with `navParams` prop: | ||
| ```js | ||
| // assume routes are defined somewhere like this: | ||
| // var routes = { | ||
| // home: { | ||
| // path: '/', | ||
| // page: 'home' | ||
| // }, | ||
| // article: { | ||
| // path: '/article/:id', | ||
| // page: 'article' | ||
| // } | ||
| // }; | ||
| var pages = [ | ||
| { | ||
| routeName: 'home', | ||
| text: 'Home' | ||
| }, | ||
| { | ||
| routeName: 'article', | ||
| routeParams: { | ||
| id: 'a' | ||
| } | ||
| text: 'Article A' | ||
| } | ||
| ]; | ||
| var Nav = React.createClass({ | ||
| render: function () { | ||
| // context should provide executeAction() and makePath(). | ||
| // This example is using this.props.context for Nav and NavLink components. | ||
| // You can also use the React context, as described in the Context section of this doc. | ||
| var context = this.props.context; | ||
| var links = pages.map(function (page) { | ||
| return ( | ||
| <li className="navItem"> | ||
| <NavLink routeName={page.routeName} navParams={page.routeParams} context={context}> | ||
| {page.text} | ||
| </NavLink> | ||
| </li> | ||
| ); | ||
| }); | ||
| return ( | ||
| <ul className="nav"> | ||
| {links} | ||
| </ul> | ||
| ); | ||
| } | ||
| }); | ||
| ``` | ||
| ## RouterMixin | ||
| `RouterMixin` is a React mixin to be used by application's top level React component to: | ||
| * [manage browser history](#history-management-browser-support-and-hash-based-routing) when route changes, and | ||
| * execute navigate action and then dispatch `CHANGE_ROUTE_START` and `CHANGE_ROUTE_SUCCESS` or `CHANGE_ROUTE_FAILURE` events via flux dispatcher on window `popstate` events | ||
| * [manage scroll position](#scroll-position-management) when navigating between pages | ||
| [Docs](https://github.com/yahoo/flux-router-component/blob/master/docs/router-mixin.md) | ||
| ### Example Usage | ||
| ```js | ||
| var RouterMixin = require('flux-router-component').RouterMixin; | ||
| var Application = React.createClass({ | ||
| mixins: [RouterMixin], | ||
| ... | ||
| }); | ||
| ``` | ||
| [//]: # (API_STOP) | ||
| ## History Management (Browser Support and Hash-Based Routing) | ||
@@ -164,0 +40,0 @@ Considering different application needs and [different browser support levels for pushState](http://caniuse.com/#search=pushstate), this library provides the following options for browser history management: |
@@ -138,3 +138,12 @@ /** | ||
| if (this._hasPushState) { | ||
| history.pushState.apply(history, arguments); | ||
| try { | ||
| // not calling pushState(state, title, url), because | ||
| // some browsers update url with '/undefined' if url is undefined | ||
| history.pushState.apply(history, arguments); | ||
| } catch (error) { | ||
| // firefox 35 requires 3 args for pushState | ||
| if (arguments.length < 3) { | ||
| history.pushState(state, title, url); | ||
| } | ||
| } | ||
| } else if (url) { | ||
@@ -174,3 +183,12 @@ location.href = url; | ||
| if (this._hasPushState) { | ||
| history.replaceState.apply(history, arguments); | ||
| try { | ||
| // not calling replaceState(state, title, url), because | ||
| // some browsers update url with '/undefined' if url is undefined | ||
| history.replaceState.apply(history, arguments); | ||
| } catch (error) { | ||
| // firefox 35 requires 3 args for replaceState | ||
| if (arguments.length < 3) { | ||
| history.replaceState(state, title, url); | ||
| } | ||
| } | ||
| } else if (url) { | ||
@@ -177,0 +195,0 @@ location.replace(url); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by6.65%
577
Worsened metrics
- Total package byte prevSize
- decreased by-7.32%
40898
- Number of lines in readme file
- decreased by-38.63%
197
No dependency changes