React-router implementation of json-routes-loader with HOC
MIT License
React-router implementation of json-routes-loader with HOC
Install the react-router-json-routes-loader
lib.
npm i react-router-json-routes-loader
This is an implementation of json-routes-loader to simplify the routes loading of your react application.
Requires some basic notions about using React and React-router for the web. You should know what is the components Router, Route and Switch from React-router/React-router-dom.
Install the react-router-json-routes-loader
lib.
npm i json-routes-loader
In your app, import the components from react-router-json-routes-loader
and react-router
import {withRouteProvider, withRouteContext} from 'react-router-json-routes-loader'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
Use the HOC on your components.
If you want, you can set some option for
const routeProviderOptions = {
// [...
// See option object of json-routes-loader :
// https://github.com/nkokla/json-routes-loader#options
// ]
}
Const Layout = ({dataRoute, path, ...otherProps}) => (
<div className="Layout">
Route: {path}
For this route, you have this content : {dataRoute}
<hr />
Also you have set this props on the component : {JSON.strigify(otherProps)}
</div>
)
const MyLayout = withRouteContext(Layout, Route, Switch)
Const App = () => ()
<div className="App">
<Router>
<MyLayout.Switch userProps="Hey ! It's me, Luigi ! " />
</Router>
</div>
)
const MyApp = withRouteProvider(App, routeProviderOptions);
ReactDOM.render(<MyApp />, document.getElementById("root"));
withRouteProvider(ReactComponent[, routeProviderOptions]);
This function return a Component who initialize a 'routes-provider' from json-routes-loader module and pre-sets this provider as context. This context will be use by the components return by withRouteContext()
.
New react component similar to ReactComponent
withRouteContext(ReactComponent[, Route[, Switch]]);
This function connect a 'react-component' to the context of the 'routes-provider'. It return the new connected component who must only be used as child (no necessarly as direct child) of component returned by the withRouteContext()
function.
Route
component of react-router
from your application. if setted, you have access to the <ReactComponent.Routes />
component.Switch
component of react-router
from your application. if setted, you have access to the <ReactComponent.Switch />
component.A new react component similar to ReactComponent
. When this component is mounted inside a parent who resulted from withRouteContext()
, it automatically receive these pre-setted props :
loadRoute()
method from json-routes-loader)withRouteContext()
If you set the arguments Switch and/or Route during call of withRouteContext()
, like this (by example) :
import { Route, Switch } from "react-router-dom";
const ReactComponent = props => <div {...props}>
const RoutedComponent = withRouteContext(ReactComponent, Route, Switch);
So you have access to thes evolve components :
Represente an list (array) of RoutedComponent for each route of the route-provider
. You can directly use this component as child of a <Switch />
component (from react-router
). All props of this component are passed to each <RoutedComponent />
of this list.
sample :
Const App = () => ()
<div className="App">
<Router>
<Switch>
<MyLayout.Routes userProps="Hey ! It's me, Luigi ! " />
<Route path='/any/thing'>
<AnyOtherComponent {...someProps}/>
</Route>
</Switch>
</Router>
</div>
)
Represente a <Switch>
with a list (array) of RoutedComponent for each route of the route-provider
as children (like <RoutedComponent.Routes {...anyProps} />
above). You can directly use this component as child of a <Router />
component (from react-router
, like <BrowserRouter />
, <HashRouter />
, etc.). All props of this component are passed to each <RoutedComponent />
of this list. (See the first sample on top).