npmpackage.info

Gathering detailed insights and metrics for @pixeloven/react-router-config

@pixeloven/react-router-config - 6.0.0-beta.2 | npmpackage.info

@pixeloven/react-router-config

Framework for building React applications. Supports SSR, React 16 and webpack4

6.0.0-beta.2

MIT

TypeScript

1.03 kB

14,496 2.1

Installations

npm install @pixeloven/react-router-config

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

10.16.0

NPM Version

lerna/3.16.4/node@v10.16.0+x64 (linux)

Pull Requests

Open

6

Total

211

Closed

20

Merged

185

Issues

Open

38

Total

96

Closed

58

Releases

Unable to fetch releases

Languages

TypeScript

MDX

JavaScript

EJS

SCSS

Makefile

CSS

Shell

Dockerfile

TypeScript (74.85%)

MDX (15.11%)

JavaScript (5.9%)

EJS (2.6%)

SCSS (0.52%)

Makefile (0.32%)

CSS (0.27%)

Shell (0.23%)

Dockerfile (0.2%)

Developer

pixeloven

Download Statistics

Total Downloads

14,496

Last Day

Last Week

136

Last Month

153

Last Year

374

GitHub Statistics

MIT License

9 Stars

1,850 Commits

5 Forks

6 Watchers

16 Branches

12 Contributors

Updated on Aug 25, 2024

Bundle Size

3.35 kB

Minified

1.03 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 12 Contributors

Package Meta Information

Latest Version

6.0.0-beta.2

Package Id

@pixeloven/react-router-config@6.0.0-beta.2

Unpacked Size

26.91 kB

Size

6.87 kB

File Count

NPM Version

lerna/3.16.4/node@v10.16.0+x64 (linux)

Node Version

10.16.0

Total Downloads

Cumulative downloads

Total Downloads

14,496

Last Day

-57.1%

Compared to previous day

Last Week

750%

136

Compared to previous week

Last Month

1,175%

153

Compared to previous month

Last Year

-50.2%

374

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-dom react-router react-router-dom

Dev Dependencies

@pixeloven/tasks @types/react @types/react-redux @types/react-router @types/react-router-dom react react-dom react-router react-router-dom

@pixeloven/react-router-config

Pixel Oven React router config.

See our website pixeloven-react-router-config for more information or the issues associated with this package.

Install

Using npm:

1npm install --save @pixeloven/react-router-config

or using yarn:

1yarn add @pixeloven/react-router-config

Usage

Note this package has currently not been tested for native route configuration.

This packages was meant to help unify client and server route configurations. To start we should make sure that we split our code base into three sections to clearly designate each code path.

Configuration

project
└── src
    ├── client
    ├── server
    └── shared

To start let's define our route configuration. Create a file routes.{js,ts} in the shared directory.

shared
└── routes.ts

In this file create we'll create our route definitions.

1import { Home } from "@shared/components/pages";
2import { Default } from "@shared/components/templates";
3
4/**
5 * Defines routes for both client and server
6 * @description Nested routes allow for pages to share templates.
7 */
8const routes = [
9    {
10        component: Default,
11        routes: [
12            // Home Page
13            {
14                component: Home,
15                exact: true,
16                path: (parentPath: string) => `${parentPath}/`,
17            },
18        ],
19    },
20];
21
22export default routes;

Implementation

Next let's implement our shared Routes component. In the example above we created a simple nested structure with Default as out template and Home as our page. First up we need to add out Routes component to our Application.

1import { Routes, RouteProps } from "@pixeloven/react-router-config";
2import routes from "@shared/routes";
3
4interface Props {
5    routes: RouteProps[];
6}
7
8class App extends React.Component<Props> {
9    public render(): React.ReactNode {
10        return <Routes as="switch" config={routes} />
11    }
12}

Of course this next step is option but here to highlight that nested routes are supported. For this example we have defined a simple Default template that might have shared components common across our application.

1import { Routes, RouteComponentProps } from "@pixeloven/react-router-config";
2
3class Default extends React.Component<RouteComponentProps> {
4    public render() {
5        return <Routes as="switch" config={routes} />
6    }
7}

Finally we arrive home with our simple little page.

1import { RouteComponentProps } from "@pixeloven/react-router-config";
2
3class Home extends React.Component<RouteComponentProps> {
4    public render() {
5        return <div>I'm Home!</div>;
6    }
7}

Integration

On both the client and server side we should integrate our unified routes with our application like so.

1import { Router } from "@pixeloven/react-router-config";
2import { App } from "@shared/components";
3import routes from "@shared/routes";
4
5//...
6
7/**
8 * Parent Path or sometimes called base path tells the config where all routes start.
9 * Defaults to "/"
10 */
11const parentPath = "/example/";
12const routeConfig = Router.getConfig(routes, parentPath);
13
14<App routes={routeConfig} />
15

At this point it is up to your application structure to determine the best approach for this step. This configuration also adds some opinions about how to fetch data from the server side but doesn't offer up any requirements for how that data is then used.

For example if we wanted to fetch data on the server side to push into our application state we might do something like the following.

1import { matchRoutes } from "@pixeloven/react-router-config";
2import routes from "@shared/routes";
3
4//...
5
6const matchedRoutes =  Router.getMatches(routes, {
7    as: "switch",
8    path: req.path // Ex: Express request object
9});
10matchedRoutes.forEach(matchedRoute => {
11    if (matchedRoute.route.fetchData) {
12        matchedRoute.route.fetchData(
13            store.dispatch,
14            matchedRoute.matched.params,
15        );
16    }
17});

Now in this example we are passing dispatch in for use to presumably dispatch actions for some side-effects. Currently this feature has a dependency on redux.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

130 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-vpf5-82c8-9v36
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-h452-7996-h45h
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-q8pj-2vqx-8ggc
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-mf6x-hrgr-658f
Warn: Project is vulnerable to: GHSA-xrh7-m5pp-39r6
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.1

/10

Last Scanned on 2025-03-24

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More