react-internal-nav

React component with single onInternalNav callback for handling clicks on <a> local to domain.

Using this means you don't need anything special to link within your app, you just render this component near the root of your app, and use plain 'ol <a href='/some-path'> within your other components to link within your app.

The component will listen to clicks and determine whether the link clicked is internal to the app or not, using the excellent local-links module by @LukeKarrys.

The onInternalNav callbac will be called with the pathname as the argument (including beginning slash, i.e. /some-path) whenever a user navigates by clicking a link within the app as long as...

the user wasn't holding modifier keys (thiw way, ctrl/cmd + click still open in new window)
the link doesn't have _target='blank'
the link is local to the same domain

If all these conditions are met, then the default is prevented and the callback is called instead.

note: It still works for cases where the event.target wasn't the <a> itself, but something wrapped inside an <a>.

Why would you need this?

This makes it easy to use any JS router you want in a React app, or even better...

Treating URLs as just another piece of app state

I'm of the opinion that URLs shouldn't really be special. They're just another piece of application state. Combining this component with a simple url setter:

function pushState(url) {
  // important to check to make sure we're 
  // not already on it
  if (url !== window.location.pathname) {
    window.history.pushState({}, '', url)
  }
}

And something that sets the state on popState events:

window.addEventListener('popstate', () => {
	// whatever you use to fire actions
	redux.dispatch(UrlActions.setUrl(window.location.pathname))
})
// running it once on load
redux.dispatch(UrlActions.setUrl(window.location.pathname))

Now your main render function can branch and render different things based on that url state, just like it would for any other state changes.

With very little code you get basic routing functionality without installing a big fancy router and dealing with the larger JS bundle that comes with it.

If the browser is old and doesn't support pushState (though most browsers do these days) the app still works, the URL just won't update.

Also, by making the URL "just another piece of state", it still plays very nicely with doing Universal (a.k.a. Isomorphic) rendering.

Why not use React Router?

React Router is very nice and lots of people absolutely love it. I'm just of the (probably unpopular) opinion that it's too big (in terms of file size) and tries to do a bit too much. Especially for small, simple, apps that don't have very many routes.

optional props

This component only defines two props:

onInternalNav the function that gets called with internal pathname
tagName you can use this to change the type of html tag used. It defaults to 'div'.

Other props are just passed through so you can still set other things, like className or whatnot and they'll be applied as well.

install

npm install react-internal-nav

example

var InternalNav = require('react-internal-nav');

var SomeComponent = React.createClass({
	onInternalNav (pathname) {
		// dispatch your URL change action or whatnot
	},

	render () {
		return (
			<InternalNav onInternalNav={this.onInternalNav}>
				<a href='/something'>i'm local</a>
			</InternalNav>
		)
	}
})

credits

If you like this follow @HenrikJoreteg on twitter.

license

MIT

newtriks/react-internal-nav