xyzdata/react-router.md

## react-router.md

      
    Raw
  

              react-router.md
            
          
    REACT ROUTER

https://reacttraining.com/react-router/web/example/sidebar

react-router

https://scotch.io/tutorials/routing-react-apps-the-complete-guide#toc-setting-up-react-for-routing
https://facebook.github.io/react/docs/components-and-props.html
import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import Item1 from './components/Item1.js';
import Item2 from './components/Item2.js';
import Item3 from './components/Item3.js';

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>item1</div>,
        main: () => <div><Item1 /></div>
    },
    {
        path: '/item2',
        sidebar: () => <div>item2</div>,
        main: () => <div><Item2 /></div>
    },
    {
        path: '/item3',
        sidebar: () => <div>item3</div>,
        main: () => <div><Item3 /></div>
    }
]

class ContentBox extends Component {
    render() {
        return (
            <Router>
                <div style={{ display: 'flex' }}>
                    <div style={{
                        padding: '10px',
                        width: '40%',
                        background: '#f0f0f0'
                    }}>
                        <ul style={{ listStyleType: 'none', padding: 0 }}>
                            <li><Link to="/">item1</Link></li>
                            <li><Link to="/item2">item2</Link></li>
                            <li><Link to="/item3">item3</Link></li>
                        </ul>
                        {/*{routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                component={route.sidebar}
                            />
                        ))}*/}
                    </div>
                    <div style={{ flex: 1, padding: '10px' }}>
                        {routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                component={route.main}
                            />
                        ))}
                    </div>
                </div>
            </Router>
        );
    }
};

export default ContentBox;


import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>home!</div>,
        main: () => <h2>Home</h2>
    },
    {
        path: '/bubblegum',
        sidebar: () => <div>bubblegum!</div>,
        main: () => <h2>Bubblegum</h2>
    },
    {
        path: '/shoelaces',
        sidebar: () => <div>shoelaces!</div>,
        main: () => <h2>Shoelaces</h2>
    }
]

const SidebarExample = () => (
    <Router>
        <div style={{ display: 'flex' }}>
            <div style={{
                padding: '10px',
                width: '40%',
                background: '#f0f0f0'
            }}>
                <ul style={{ listStyleType: 'none', padding: 0 }}>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/bubblegum">Bubblegum</Link></li>
                    <li><Link to="/shoelaces">Shoelaces</Link></li>
                </ul>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.sidebar}
                    />
                ))}
            </div>

            <div style={{ flex: 1, padding: '10px' }}>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.main}
                    />
                ))}
            </div>
        </div>
    </Router>
);

export default SidebarExample;