React router basic example.

App.js

import React, { Component } from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';


const Contacto = () => (
    <div className="contacto">
        Salude no mas
    </div>
);


const About = () => (
    <div className="about">
        Hola que hace
    </div>
);


class User extends React.Component {
    componentDidMount() {
        const userId = this.props.match.params.id;
        if (!(userId in this.props.users)) {
            this.props.loadUser(userId);
        }
    }

    render() {
        const userId = this.props.match.params.id;
        const user = this.props.users[userId];
        if (user) {
            return (
                <div className="user">
                    Listo usuario {user.id}
                </div>
            );
        }
        else {
            return (
                <div className="user">
                    Cargando usuario {userId}
                </div>
            );
        }
    }
}


const App = ({ loadUser, state }) => (
    <div className="App">
        <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <nav>
            <Link to='/contacto'>Contacto</Link>
            <Link to='/about'>About</Link>
            <Link to='/user/1234'>User 1234</Link>
        </nav>

        <Route path='/contacto' component={Contacto} />
        <Route path='/about' component={About} />
        <Route path='/user/:id' render={props => (
            <User {...props} loadUser={loadUser} users={state.users} />
        )} />
    </div>
);


class AppRouter extends Component {

    constructor(props) {
        super(props);
        this.state = {users: {}};
    }

    loadUser(id) {
        console.log(`Loading user, ${id}`);
        this.setState({
            users: {...this.state.users, [id]: {id: id}}
        });
    }

    render() {
        return (
            <BrowserRouter>
                <App
                    loadUser={this.loadUser.bind(this)}
                    state={this.state}
                />
            </BrowserRouter>
        );
    }
}

export default AppRouter;