Skip to content

Instantly share code, notes, and snippets.

@jamesknelson
Last active Feb 3, 2017
Embed
What would you like to do?
mdx: A markdown-like format that gives you inline JSX, and compiles to a React stateless function
metaDescription
junctions.js lets you add routes to your React components.

import Link from './Link' import ButtonTheme from './ButtonTheme' import ExampleSet from './ExampleSet' import ComponentExample from './ComponentExample' import GistVanillaExample from './examples/the-gist-vanilla' import GistSugarFreeExample from './examples/the-gist-sugar-free' import BasicExample from './examples/basic'

Junctions

Add routes to your reusable components

}>15 Minute Course }>Documentation

The Gist

<Tab.Group theme={}> <Tab.Item title='Vanilla React'> </Tab.Item> <Tab.Item title='Sugar Free'> </Tab.Item> </Tab.Group>

Try For Yourself

Create a new React app:

npm install -g create-react-app
create-react-app junctions-example
cd junctions-example

Install junctions:

npm install --save junctions react-junctions history

Then copy and paste any example from this page into your src/App.js file! For example, this one:

What about react-router 4?

The main difference between junctions.js and react-router is this: junctions puts components first, react-router puts URLs first.

This means that if you're building an application, junctions will probably solve your problem better. And while some people are still building websites, most people are building applications.

Do not divide the web into documents and applications. Documents are dead.

But let's look at some specifics.

Junctions makes routing information more accessible

  • In junctions.js, your routes are defined in a createJunction() statement, and accessible through your component's junctions property.
  • In react-router 4, your routes are defined within your component's render() method using <Route> elements, and hidden from the outside world.

Junctions is a little bit more verbose, but it gives you a lot more flexibility. You can use the Junction object that it provides to generate things like menus or a list of all possible routes:

<Tab.Group theme={}> <Tab.Item title='Menu'> </Tab.Item> <Tab.Item title='Route Map'> </Tab.Item> </Tab.Group>

Junctions warns you when a linked path does not exist

Because routing information is accessible to the outside world, the junctions.js <Link> element will warn you when you've made a typo or referred to a non-existent route.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment