Operational router
The goal of this tiny library is to deal with custom basePath
in a sub-application.
In the context of Contiamo, every application can be run in standalone mode or be embeded inside a global contiamo product. In the second case, some url params are managed in an higher level, this is exactly what we try to solve with this library. This is our solution to compose "easily" multiple application in one.
Note: If you have a better solution, please tell us
Getting started
npm i @operational/router react-router react-router-dom
- Follow the Archictecture setup
Architecture setup
Let's do an example to illustrate the setup of this library:
<Router>
<Route path="/:tenant/:project/pantheon" render={/* ... */} />
<Route path="/:tenant/:project/hub" render={/* ... */} />
<Route
path="/:tenant/:project/labs"
render={({ history: { push, replace } }) => (
<OperationalRouterProvider
basePath="/:tenant/:project/labs/"
pushState={push}
replaceState={replace}>
{({ resolvePath, basePath, pushState }) => {
/**
* Labs application router, relative to the `basePath`
* - I can use `basePath` to define my `Route` and retrieve `tenant` and `project` from the parent
* - I can use `<Link to={resolvePath("project")} />` to navigate inside the labs context
* - I can use `pushState("project")` to navigate programatically
*/
}}
</OperationalRouterProvider>
)}
/>
<Router>
Finally, this lib exports OperationalRouter
and withOperationalRouter
to have access to the same resolvePath
, basePath
and pushState
anywhere inside my application.
Render function style:
const MyPage = () => (
<Page title="my page">
<OperationalRouter>
{({ pushState }) => <button onClick={() => pushState("/")}>Go to labs home</button>}
</OperationalRouter>
</Page>
);
export default Page;
HOC style:
const MyPage = ({ pushState }) => (
<Page title="my page">{<button onClick={() => pushState("/")}>Go to labs home</button>}</Page>
);
export default withOperationalRouter(MyPage);
How to use this lib to compose applications
In contiamo, every applications expose a component with this shape:
export interface MyApplicationProps extends OperationalRouterProps {
/* custom props if needed to configure the app */
}
export const MyApplication: React.SFC<MyApplicationProps> = props => (
<OperationalRouterProvider {...props}>
{({ basePath }) => {
if (!basePath.includes(":tenantId")) {
throw new Error("This application need to have ':tenantId' in the basePath")
}
return <Switch>
<Route path={basePath} render={<Home />} />
<Route path={`${basePath}/projects`} render={<Projects />} />
<Route path={`${basePath}/users`} render={<Users />} />
</Switch>
}
</OperationalRouterProvider>
);
Contributions
Issues, Pull Requests and extensions are welcome. No question is a silly question. Head on over to issues to see where you could get involved, or to open one that will help us further improve this project.