Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including dynamic-react-router with all npm packages installed. Try it out:

var dynamicReactRouter = require("dynamic-react-router")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

dynamic-react-router v1.1.1

Módulo para la creación dinámica de enrutadores basados en la versión 4.0.0 de react-router a partir de un objeto o archivo de configuración (.js)

dynamic-react-router

Módulo para la creación dinámica de enrutadores basados en la versión 4.0.0 de react-router a partir de un objeto o archivo de configuración (.js)

Instalación

    $ npm install --save dynamic-react-router

Dependencias

    $ npm install --save react react-router

Ejemplo de uso

Código competo en el directorio dynamic-react-route demo

route.js

import NotFound from './Components/404';
import Home from './Components/Home';
import PageOne from './Components/Pages/pageOne';
import PageTwo from './Components/Pages/pageTwo';
import PageThree from './Components/Pages/pageThree';
import PageThreeAdd from './Components/Pages/pageThreeAdd';
import PageFour from './Components/Pages/pageFour';
// Configuración del Router
export const ROUTES_CONFIG = [
    // ROOT
    {
        path: '/',
        pathExact: true,
        component: Home
    },
    // PAGE 1
    {
        path: '/pageOne',
        pathExact: true,
        component: PageOne
    },
    // PAGE 2
    {
        path: '/pageTwo',
        pathExact: true,
        component: PageTwo
    },
    // PAGE 3
    {
        path: '/pageThree',
        pathExact: true,
        auth: true,
        component: PageThree,
        routes: [
            // PAGE 3/ADD
            {
                path: '/pageThree/add',
                pathExact: true,
                auth: true,
                component: PageThreeAdd
            },
            // PAGE 4
            {
                path: '/pageFour/:id/:action',
                auth: true,
                component: PageFour
            }
        ]
    },
    // NOT FOUND
    {
        component: NotFound
    }
];

app.js

import React, { Component } from 'react';
import Layout from '../Layout';
import DynamicReactRouter from 'dynamic-react-router';
// Configuración del Enrutador
import { ROUTES_CONFIG } from '../../route';
class App extends Component {
    constructor(props) {
        super(props);
    }
    // Función booleana para las rutas del enrutador que requieren de autenticación
    isAuth() {
        if (store.get('jwt')) {
            return true;
        }
        return false;
    }
    render() {
        return (
            <DynamicReactRouter config={ROUTES_CONFIG} layout={Layout} isAuth={this.isAuth} />
        );
    }
}
export default App;

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './Components/App';
import styles from './css/styles.css';
render(<App />, document.getElementById('app'));

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free