react-router-route-config
v1.0.0
Published
User `route-config` with `react-router`
Downloads
15
Readme
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
import { BrowserRouter } from 'react-router-dom'
import { Provider, RouteConfigSiteMap, createReactRouterConfig } from 'react-router-route-config'
import { RouteConfig } from 'route-config'
const Home = () => <div>Home</div>
const routeConfig = new RouteConfig({
routes: {
home: {
config: { reactRouter: { exact: true, render: Home } }
path: '/home'
}
}
}, { configs: [createReactRouterConfig()] })
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={}] (Object): options passed to
ReactRouterConfig
constructor- [
defaultValue={}
] (Object): if you want to have defaultValue when config is set - [
name='reactRouter'
] (String): config name
- [
Ex:
import { createReactRouterConfig } from 'react-router-route-config'
import { RouteConfig } from 'route-config'
const Home = () => <div>Home</div>
const routeConfig = new RouteConfig({
routes: {
home: {
config: {
reactRouter: { render: Home }
},
path: '/home'
}
}
}, { configs: [reactRouterConfig({ defaultValue: { exact: true } })] })
//=> <Route component={Home} exact={true} />
RouteConfigSiteMap
(Component)
React.Component
that generate router tree according to your routeConfig
Props:
- [
AnimationComponent
] (React.Component): wrap eachSwitch
- [
NotFoundComponent
] (React.Component): component to render when noRoute
match inSwitch
- [
configName='reactRouter'
] (String): react router config name in routeConfig.
routeConfigToReactRouter
(HOC)
Enable you to use route key rather than path for ReactRouter components.
Ex:
import { Link } from 'react-router-dom'
import { routeConfigToReactRouter } from 'react-router-route-config'
const RouteConfigLink = routeConfigToReactRouter(Link)
// 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'] (String): prop
name
to pass to wrapper component
Ex:
import { withRouteConfig } from 'react-router-route-config'
const Button = withRouteConfig()({ routeConfig, to }) => (
<button onClick={() => window.location.href = routeConfig.url(to)}>
Button with routeConfig
</button>
)