Next.js article for eincode.com -- React demo code

App.js

import { Route, Switch} from 'react-router-dom';
 
import './App.css';
import  Home from './Home';
import About from './About';
import Contact from './Contact';
import Layout from './Layout';
 
function App() {
 return (
   <div className="App">
     <Layout>
       <Switch>
         {/* Routes are loaded inside these tags */}
         <Route path="/contact" component={Contact}/>
         <Route path="/about" component={About}/>
         <Route path="/" component={Home}/>
       </Switch>
     </Layout>
   </div>
 );
}
 
export default App;

Home.js

import React from 'react';
 
function Home() {
   return (
       <React.Fragment>
           <h1>This is the Home page</h1>
           <h2>This is the React demo</h2>
           <h2>If you right click on this app, and choose 'View Page Source', you'll see that the HTML content doesn't include this paragraph.</h2>
       </React.Fragment>
   );
}
 
export default Home;

Layout.js

import { Link } from 'react-router-dom';
import React from 'react';
 
function Layout({children}) {
   return (
       <React.Fragment>
           <nav>
               <ul>
                   <li>
                   <Link to="/">Home</Link>
                   </li>
                   <li>
                   <Link to="/about">About</Link>
                   </li>
                   <li>
                   <Link to="/contact">Contact</Link>
                   </li>
               </ul>
           </nav>
           {children}
       </React.Fragment>
 
   )
}
 
export default Layout;