TL;DR? Junctions is a new, composable alternative to react-router. Get it at the junctions.js website!

It was pretty normal day in Tokyo when I received a request from a client. “I’d like this application screen to be a React Component. And I want it to be reusable.”

Given my client’s app was created with React, I naturally said “Yes Sir”. I mean, the best part about React is that components are reusable. What could go wrong?

The answer is Links. Links are what could go wrong.

You see, the thing about the web is that it is made of URLs. And the thing about URLs is that they don’t compose. But reusable components need to compose!

To demonstrate, imagine that you’d like to make a self contained PaymentsScreen component, like so:

class PaymentsScreen extends Component {
    static propTypes = {
        path: PropTypes.oneOf(['/new', '/list']),
    }

    render() {
        return (
            <div>
                <nav>
                    <a href='/new'>Add Payment</a>
                    <a href='/list'>List</a>
                </nav>
                <div>
                    Hi!
                </div>
            </div>
        )
    }
}

Easy, right? Except — what if you then want to mount this component somewhere other than the application root? The <a> tags are going to break.

But you’ve got you’re head screwed on, so you know how to fix this. Just pass in a basePath.

<a href=`${basePath}/new`>Add Payment</a>
<a href=`${basePath}/list`>List</a>

And this works. Until you want to mount this component within a modal which doesn’t have URLs. Don’t mount it in a modal, you say. But your client insists. Now what?

You’re up the creek with no paddle. That’s what.

Components With URLs Aren’t Reusable

Routable components have Links. Links point to URLs. And URLs cause components to be dependent on their environment. So perhaps we should just give up on reusability for any components with links?

But wait a minute. The great thing about React is that it lets you write reusable components. And one of the great things about the web is that all its content has URLs. So wouldn’t it be ideal if you could have your cake and eat it too?

Happily, the answer is that you can have your cake and eat it too. That’s the beauty of junctions.js, the tool I created to solve this problem.

Junctions.js is a router built from the ground up for component-based applications.

With junctions, you can create reusable React components that define their own routes and links. Junctions does the work to compose these components. Your components will integrate seamlessly with the browser History API. You’ll get routing that works with React instead of fighting against it.

So how does this all work? That’s a great question, and its one I answer in the tutorial and guide. In fact, this blog post is extracted from the Motivation page in that same guide.

The thing is, I’m so excited about Junctions that I really want to share it with you right now. It has solved a number of problems for me in my daily work, and I hope you’ll find similar value in it. The caveat is that the Guide is still a little WIP. So if you’d like to contribute, open an issue and let’s talk! Otherwise, join my newsletter to be the first to hear when the documentation reaches its final polished state — and to get five free ReactJS and JavaScript Cheatsheets!

P.S. If you’d like to see more work on Junctions, make sure to star it on GitHub!