ReactRouterRouteConfig
Use route-config
with react-router
Installation
NPM:
$ npm install --save react-router-route-config
Yarn:
yarn add react-router-route-config
Import
In ES6:
import { Provider, createReactRouterConfig, createSiteMap, routeConfigToReactRouter, withRouteConfig } from 'react-router-route-config'
Use
const Home = <div>Home</div> const routeConfig = routes: home: config: reactRouter: exact: true render: Home path: '/home' configs: const App = <Provider routeConfig=routeConfig> <BrowserRouter> <RouteConfigSiteMap /> </BrowserRouter> </Provider>
API
Provider
(Component)
Provider
use React.createContext()
API.
Props:
routeConfig
(RouteConfig): instance ofRouteConfig
.
createReactRouterConfig
(Function)
Returns a reactRouter config manager for RouteConfig
Arguments:
- options={}: options passed to
ReactRouterConfig
constructordefaultValue={}
: if you want to have defaultValue when config is setname='reactRouter'
: config name
Ex:
const Home = <div>Home</div> const routeConfig = routes: home: config: reactRouter: render: Home path: '/home' configs: //=> <Route component={Home} exact={true} />
RouteConfigSiteMap
(Component)
React.Component
that generate router tree according to your routeConfig
Props:
AnimationComponent
: wrap eachSwitch
NotFoundComponent
: component to render when noRoute
match inSwitch
configName='reactRouter'
: react router config name in routeConfig.
routeConfigToReactRouter
(HOC)
Enable you to use route key rather than path for ReactRouter components.
Ex:
const RouteConfigLink = // Basic<RouteConfigLink to="home">Home</RouteConfigLink>//=> <Link to="/home">Home</Link> // Advanced/* posts: { path: '/posts' routes: { show: { path: '/:postId' } } }*/<RouteConfigLink to= key: 'posts.show' params: postId: 1 >Post 1</RouteConfigLink>//=> <Link to="/posts/1">Home</Link>
withRouteConfig
(HOC)
Returns a HOC that inject routeConfig
in key
props. By default routeConfig
Arguments:
- key='routeConfig': prop
name
to pass to wrapper component
Ex:
const Button = <button onClick= windowlocationhref = routeConfig> Button with routeConfig </button>