1.0.0 • Published 5 years ago
react-router-route-config v1.0.0
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={}: options passed to
ReactRouterConfig
constructordefaultValue={}
: if you want to have defaultValue when config is setname='reactRouter'
: 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
: 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:
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': 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>
)