can-route-react
State-based routing with React components.
What's included
can-route-react
is a collection of React components that help with routing. The components are modeled after the ones found in React Router. Here's the current list of components:
- The Route Component - Show or hide components based route data.
- The Link Component - Create links from route state. (coming soon)
State-Based Routing
State-based routing decouples the URL from your application's routing. Routing rules and URLs are created from a state object. It's easier to change URL schemes when needed. The can-route module is arguably the best state-based router available, so it was selected for its core routing functionality.
Preparation
Before you can use the components, you'll need to setup can-route. Here's a basic example:
;; // Create a DefineMap to setup route attributes.const RouteMap = DefineMap;routedata = {}; // Create a '/page' route.; route;
The Route Component
The <Route>
component declaratively maps routes to the component hierarchy. It basically shows/hides a component based on the route attributes you provide:
import Route from 'can-route-react'; // Create a basic Home component. { return <div>Welcome Home!</div>; } // The Home component will show when the route has a `page` attribute equal to "home".<Route = = />
An alternate syntax allows you to show/hide a component based on the URL path. This is similar to React Router's Route component.
import Route from 'can-route-react'; // The Home component will show when the URL path is "/" or empty string.<Route ='/' = />
Pro Tip: While the
path
syntax works just fine, it's not a recommended practice in state-based routing. It tightly couples your component to the URL. If you change your URL scheme, you have to fix every place that uses that URL.
Route Example
import React from 'react';import ReactDOM from 'react-dom';import Route from 'can-route-react'; // Handlers for the links { routedatapage = 'home';} { routedatapage = 'about';} // Components to pass into the Route component. return <div>Welcome Home!'</div>);};About ({children}) => { return (<div>{children}</div>);}; ReactDOM.render( <div className='container'> <div> <a href='javascript://' onClick={homeClicked}>Home</a> <a ='javascript://' =>About</a> </div> <div> /* React Router compatible syntax is available. See Pro-tips. */ <Route ='/' = /> <Route ='/about' = > /* This inner text will show because the About component uses `children`. */ Welcome to the About page! </Route> </div> </div> document;
Running the Demo
Do npm install
or run yarn
in the root directory. Start an http-server
and open the root directory.
Changelog
0.1.0
- The <Route>
component can render children if the routed component uses {children}
in its content.
0.0.2
- Created the <Route>
component.