Uso de routes en React.js

Hola amigos de la #nerdytud

Hoy les comparto un ejemplo bastante sencillo realizado con #react.js para la utilización de dos routes con diferentes vistas, partiendo de un solo componente.

Creación del proyecto

npx create-react-app scifi

Creación de componentes (autores)

import React from 'react';

const Asimov = () => {

    return (
        <div className='container'>
            <h3>Asimov</h3>
        </div>
    );
}

export default Asimov;

Creación de componente pseudo login

import React from 'react';

const Login = ({ history }) => {

    const handleLogin = () => {
        history.replace('/');
    }

    return (<div className='container'>
        <h3>Login</h3>

        <button className='btn btn-primary' onClick={handleLogin}>Ingresar</button>
    </div>);
}

export default Login;

Creación de navbar

import React from 'react'
import { Link, NavLink } from 'react-router-dom'

export const Navbar = () => {
    return (
        <nav className="navbar navbar-expand-sm navbar-dark bg-dark">

            <Link
                className="navbar-brand"
                to="/"
            >
                Sci-Fi
            </Link>

            <div className="navbar-collapse">
                <div className="navbar-nav">

                    <NavLink
                        activeClassName="active"
                        className="nav-item nav-link"
                        exact
                        to="/asimov"
                    >
                        Asimov
                    </NavLink>

                    <NavLink
                        activeClassName="active"
                        className="nav-item nav-link"
                        exact
                        to="/bradbury"
                    >
                        Bradbury
                    </NavLink>

                    <NavLink
                        activeClassName="active"
                        className="nav-item nav-link"
                        exact
                        to="/clarke"
                    >
                        Clarke
                    </NavLink>

                    <NavLink
                        activeClassName="active"
                        className="nav-item nav-link"
                        exact
                        to="/dick"
                    >
                        Dick
                    </NavLink>

                    <NavLink
                        activeClassName="active"
                        className="nav-item nav-link"
                        exact
                        to="/login"
                    >
                        salir
                    </NavLink>
                </div>
            </div>
        </nav>
    )
}

Creación de ruta principal

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from '../components/login/Login';
import AuthorRouter from './AuthorRouter';

const AppRouter = () => {
    return (
        <Router>
            <Switch>
                <Route exact={true} path='/login' component={Login} />
                <Route path='/' component={AuthorRouter} />
            </Switch>
        </Router>
    )
}

export default AppRouter;

Creación de ruta secundaria

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import Asimov from '../components/authors/Asimov';
import Bradbury from '../components/authors/Bradbury';
import Clarke from '../components/authors/Clarke';
import Dick from '../components/authors/Dick';
import { Navbar } from '../components/ui/Navbar';

const AuthorRouter = () => {
    return (
        <>
            <Navbar />

            <Switch>
                <Route exact path='/asimov' component={Asimov} />
                <Route exact path='/bradbury' component={Bradbury} />
                <Route exact path='/clarke' component={Clarke} />
                <Route exact path='/dick' component={Dick} />
                <Redirect to='/clarke' />
            </Switch>
        </>
    )
}

export default AuthorRouter;

Invocar la ruta

import React from 'react';
import AppRouter from './Routes/AppRouter';


const ScifiApp = () => {

    return (<AppRouter />);
}

export default ScifiApp;

Llamar a la app desde index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ScifiApp from './ScifiApp';

ReactDOM.render(
  <ScifiApp />,
  document.getElementById('root')
);

github