jamesknelson/Pitch.mdx

## Pitch.mdx

      
    Raw
  

              Pitch.mdx
            
          
  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.


@thejameskyle

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.