Creare un'applicazione multi-pagina (MPA) con React JS

In un recente articolo ho illustrato come impostare l'ambiente di lavoro per poter creare un'applicazione React JS, in particolare partendo da un progetto preconfigurato.

Vediamo come sfruttare le potenzialità della libreria React JS, in particolare il componente React Router DOM per poter suddividere la nostra  applicazione in più pagine.

Per installare il componente react-router-dom nel nostro progetto preconfigurato usiamo il Prompt dei comandi, posizioniamoci all'interno della cartella del progetto usando il comando:

cd //percorso cartella

e poi:

npm install --save react-router-dom

L'applicazione di esempio in questo articolo è suddivisa nelle seguenti pagine "Home", "About", "Contact" e "Error", quest'ultima ci servirà quando nel browser verrà digitato un indirizzo non valido.

Nella cartella src/ del progetto creaimo una cartella che chiamiamo pages/, all'interno della quale salviamo i componenti "Home.js", "About.js", "Contact.js" e "Error.js":

Home.js

import React from 'react';
 
const Home = () => {
    return (
       <div>
           <h1>Home Page</h1>
           <p>Lorem Ipsum...</p>           
       </div>
    );
} 
export default Home;

About.js

import React from 'react';
 
const About = () => {
    return (
       <div>
          <h1>About</h1>
          <p>Lorem Ipsum...</p>
       </div>
    );
} 
export default About;

Contact.js

import React from 'react';
 
const Contact = () => {
    return (
       <div>
          <h1>Contact</h1>
          <p>Lorem Ipsum...</p>
       </div>
    );
} 
export default Contact;

Error.js

import React from 'react';
 
const Error = () => {
    return (
       <div>
          <p>Error: Page Not Found!</p>
       </div>
    );
} 
export default Error;

Per personalizzare il menù di navigazione uso react-bootstrap, per installarlo usare il seguente comado:

npm install react-bootstrap bootstrap

quindi creo un nuovo componente Navigation.js e lo salvo nella cartella pages/

Navigation.js

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const Navigation = () => {
    return (
        <Navbar bg="dark" variant="dark" expand="lg" fixed="top">
          <Navbar.Brand href="/">React Multipage</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">          
            <Nav className="mr-auto">           
             <Nav.Link href="/" id="home">Home</Nav.Link>
             <Nav.Link href="/about" id="about">About</Nav.Link>
             <Nav.Link href="/contact" id="contact">Contact</Nav.Link>       
            </Nav>          
          </Navbar.Collapse>
      </Navbar>
    );
}
export default Navigation;

per usare i componenti Navbar e Nav di bootstrap bisogna importatli tramite "import".

Adesso che abbiamo creato tutti i componenti della nostra applicazione React, modifichiamo il componente App.js in modo da poter ottenere il risultato voluto:

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Error from './pages/Error';
import Navigation from './pages/Navigation';
import './App.css';

class App extends Component {

render() {
    return (      
       <BrowserRouter>
        
          <Navigation />
          <Container fluid="true">
          <Row>
          <Col>
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
             <Route component={Error}/>
           </Switch>
           </Col>
           </Row>
        </Container> 
      </BrowserRouter>
    );
  }
}
 
export default App;

Demo on Stackblitz