react route reactstrap table form CRUD

project link: http://chuanshuoge1.github.io/reactstrap

Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter} from 'react-router-dom'

ReactDOM.render(

    <BrowserRouter>

        <App />

    </BrowserRouter>, document.getElementById('root'));

registerServiceWorker();

--------------------------------------------------------------------------

App.js

import React, { Component } from 'react';

import './App.css';

import { Switch, Route, Link } from 'react-router-dom';

import  Header  from './Header';

import { Home } from './Home';

import { Schedule } from './Schedule';

import { Roster } from './Roster';

class App extends Component {

    render() {

        return (

            <div>

                <Header />

                <Main />

            </div>

        );

    }

}

const Main = () => (

    <main>

        <Switch>

            <Route exact path='/' component={Home} />

            <Route path='/roster' component={Roster} />

            <Route path='/schedule' component={Schedule} />

        </Switch>

    </main>

)

export default App;

--------------------------------------------------------------------

App.css

.my-link-color {

    color: white;

}

    .my-link-color:hover {

        color: gainsboro;

        text-decoration: none;

    }

    .my-link-color:focus {

        color: gold;

        text-decoration: none;

    }

.my-tab-color {

    background-color: antiquewhite;

    color: white;

}

.my-tab-content-color {

    background-color: antiquewhite;

}

.my-schedule-form {

    background-color: palegreen;

}

---------------------------------------------------------

Header.js

import React, { Component } from 'react';

import { Switch, Route, Link } from 'react-router-dom'

import 'bootstrap/dist/css/bootstrap.min.css';

import './App.css';

import {

    Collapse,

    Navbar,

    NavbarToggler,

    NavbarBrand,

    Nav,

    NavItem,

    NavLink,

} from 'reactstrap';

export default class Example extends React.Component {

    constructor(props) {

        super(props);

        this.toggle = this.toggle.bind(this);

        this.state = {

            isOpen: false

        };

    }

    toggle() {

        this.setState({

            isOpen: !this.state.isOpen

        });

    }

    render() {

        return (

            <div>

                <Navbar className="navbar-inverse bg-secondary" dark expand="sm">

                    <NavbarBrand><Link to='/' className="my-link-color">Reactstrap</Link></NavbarBrand>

                    <NavbarToggler onClick={this.toggle} />

                    <Collapse isOpen={this.state.isOpen} navbar>

                        <Nav className="sm-auto" navbar>

                            <NavItem>

                                <NavLink><Link to='/' className="my-link-color">Home</Link></NavLink>

                            </NavItem>

                            <NavItem>

                                <NavLink><Link to='/schedule' className="my-link-color">Schedule</Link></NavLink>

                            </NavItem>

                            <NavItem>

                                <NavLink><Link to='/roster' className="my-link-color">Roster</Link></NavLink>

                            </NavItem>

                        </Nav>

                    </Collapse>

                </Navbar>

            </div>

        );

    }

}

---------------------------------------------------------------------

Home.js

import React, { Component } from 'react';

export const Home = () => (

    <div>

        <h1>Welcome to the Tornadoes Website!</h1>

    </div>

)

------------------------------------------------------

Schedule.js

http://chuanshuoge2.blogspot.com/2018/06/reactstrap-schedule.html

-------------------------------------------------------------------

Roster.js

import React, { Component } from 'react';

import { Switch, Route, Link } from 'react-router-dom';

import { Player, PlayerAPI } from './Players';

export const Roster = () => (

    <Switch>

        <Route exact path='/roster' component={FullRoster} />

        <Route path='/roster/:number' component={Player} />

    </Switch>

)

const FullRoster = () => (

    <div>

        <ul>

            {

                PlayerAPI.all().map(p => (

                    <li key={p.number}>

                        <Link to={`/roster/${p.number}`}>{p.name}</Link>

                    </li>

                ))

            }

        </ul>

    </div>

)

----------------------------------------------------------------

Player.js

import React, { Component } from 'react';

import { Switch, Route, Link } from 'react-router-dom'

export const Player = (props) => {

    const player = PlayerAPI.get(

        parseInt(props.match.params.number, 10)

    )

    if (!player) {

        return <div>Sorry, but the player was not found</div>

    }

    return (

        <div>

            <h1>{player.name} (#{player.number})</h1>

            <h2>Position: {player.position}</h2>

            <Link to='/roster'>Back</Link>

        </div>

    )

}

export const PlayerAPI = {

    players: [

        { number: 1, name: "Ben Blocker", position: "G" },

        { number: 2, name: "Dave Defender", position: "D" },

        { number: 3, name: "Sam Sweeper", position: "D" },

        { number: 4, name: "Matt Midfielder", position: "M" },

        { number: 5, name: "William Winger", position: "M" },

        { number: 6, name: "Fillipe Forward", position: "F" }

    ],

    all: function () { return this.players },

    get: function (id) {

        const isPlayer = p => p.number === id

        return this.players.find(isPlayer)

    }

}