Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@operational/router
Advanced tools
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 :wink: We are always happy to learn something.
npm i @operational/router react-router react-router-dom
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);
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>
);
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.
FAQs
Router utility to deal with custom base path
We found that @operational/router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.