SOURCE

// a simple SPA showcasing react-router-dom

// the destination container
const destination= document.querySelector('#container1');
// import ract router utilities
const {Switch, Route, Link, HashRouter, BrowserRouter}= ReactRouterDOM;

// the App frame (Initial Frame)
const App=(props)=>(
    <div>
        {/* Navigation */}
        <Header />
        {/* Routes */}
        <Main />
    </div>
);

// routes. use Link Component instead of Anchor
class Header extends React.Component{
    render(){
        return (
            <div>
                <h1>Sample SPA</h1>
                <ul className='header'>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/stuff'>Stuff</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                    <li><Link to={{pathname:'/contact/alex'}}>Contact Alex</Link></li>
                </ul>
            </div>
        );
    }
}

class Main extends React.Component{
    render(){
        return (
            <div>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/stuff' component={Stuff}/>
                    <Route path='/contact' component={Contact}/>
                </Switch>
            </div>
        );
    }
}

const Home= (props)=>(
    <div>
        <h2> Hello </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
);

const Stuff= (props)=>(
           <div>
             <h2>STUFF</h2>
             <p>Mauris sem velit, vehicula eget sodales vitae, rhoncus eget sapien:</p>
             <ol>
               <li>Nulla pulvinar diam</li>
               <li>Facilisis bibendum</li>
               <li>Vestibulum vulputate</li>
               <li>Eget erat</li>
               <li>Id porttitor</li>
             </ol>
            </div>
);

// an api to fetch and format contact info
const ContactAPI={
    contacts:[
        {
            name: 'alex',
            mobile: '12312453',
            email:'alex@163.com'
        },
        {
            name: 'tristan',
            mobile: '122212453',
            email:'tristan@163.com'
        },
        {
            name: 'paula',
            mobile: '12452453',
            email:'paula@163.com'
        }
    ],
    _format(contact){
        return(
            <li>
                <h3>{contact.name}</h3>
                <ul>
                    <li>Mobile: {contact.mobile}</li>
                    <li>Email: {contact.email}</li>
                </ul>
            </li>
        );

    },
    all(){
        console.log('this is: ', this);
        const contactsJSX= this.contacts.map((item)=>(this._format(item)));
        return (
            <ul>
                {contactsJSX}
            </ul>
        )
    },
    get(name){
        console.log('this is: ', this);
        console.log('name is: ', name);
        for (let i=0;i<this.contacts.length; i++){
            if(this.contacts[i].name === name){
                const jsx= this._format(this.contacts[i]);
                console.log('jsx equals:', jsx);
                return (
                    <ul>
                        {jsx}
                    </ul>
                );
            }
            if(i === this.contacts.length-1){
                console.log('nothing found')
                return <p>No such Person !</p>
            }
        }

    }


}


// <Route> can be rendered in 3 ways render, component, children. see documentation for details
class Contact extends React.Component{
    render(){
        return (
            <div>
                <Switch>
                    <Route exact path='/contact' render={(props)=>(ContactAPI.all())}/>
                    <Route path='/contact/:name' render={(props)=>{
                        return ContactAPI.get(props.match.params.name);
                    }} />
                </Switch>
            </div>
        );
    }
}



// rendering Router components
ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
),
destination);

<div id="container1">
    <!-- This element's contents will be replaced with your component. -->
</div>

body{
  background-color: #FCFCFC;
}
.container p {
    font-size: 25px;
}