Exercise: React Router part 1 (Basic)

Idea: Introduction to React-Router (BrowserRouter, Route, and Link).
Background: https://blog.webdevsimplified.com/2022-07/react-router/ and https://www.youtube.com/watch?v=Ul3y1LXxzdU

In this exercise you have to create a very basic React App with routing.

Router

Step 1 (create the initial React-App and install the react-router-dom lib)
Create a new React App: 'basic' by running 'npx create-react-app basic'

Navigate to your new project directory and install the react-router-dom library locally by running 'npm install --save react-router-dom '.

Verify that your initial project is up and running with: 'npm start'.

Step 2 (Clean the default src-folder)
Delete all files in the src-folder

Step 3 (App.js)
Create a new App.js fil in the src-folder.
Import React from 'react', create a simple App-component and make a default export of the component:

import React from 'react'


  
const App = () => (
  <div>
    Test!
  </div>
)

export default App

Step 4 (index.js)
Create a new index.js fil in the src-folder .

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

        

      
const container = document.getElementById('root');
const root = createRoot(container);
root.render((
    <App />
));

And verify that it still works:

Step 5 (Home.js)
Create a new 'landing page' to the app (Home.js in the src-folder). Add a simple component like:

import React from 'react'
  
const Home = () => (
  <div>
    <h1>Welcome to the Landing Page for React-Router Basic!</h1>
  </div>
)
  
export default Home

Step 6 (Page2.js)
Create a second ' page' to the app (Page2.js in the src-folder). Add a simple component like:

import React from 'react'

const Page2 = () => (
  <div>
    <h1>Page2 for React-Router Basic!</h1>
  </div>
)

export default Page2

Step 7 (Update the index.js file)
Import the BrowserRouter component from 'react-router-dom' and wrap it arround the App-component (routing will now be awailable all over in our App).

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';

        

      
const container = document.getElementById('root');
const root = createRoot(container);
root.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
));

Step 8 (Update the App.js file)
Import the Route Component from 'react-router-dom' and the two components 'Home' and 'Page2'. Insert 2 Routs: path='/' for the Home-component and path='/page2' for the Page2-component:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Page2 from './Page2';
  
const App = () => (  
  <Routes> 
    <Route path='/' element={<Home/>} />
    <Route path='/Page2' element={<Page2/>} />
  </Routes>  
) 
  
export default App

Verify that your Routing is working:

a) Try both: 'localhost.3000' and 'localhost:3000/page2'.
b) What happens if you type: 'localhost:3000/page3' ?
c) Is the Browser history working (<- and ->) ?

Link

In Single Page Applications (SPA) we don't use <a href='....> since it causes a brand new page (and clears the state of the App). In React Apps we are using the Link component from 'react-router-dom', it prevents the reload and the loss of the apps state.

Step 9 (Update the App.js file)
Import the Link Component from 'react-router-dom' and add 2 Link-components with links to the 'Home' and 'Page2'

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import Page2 from './Page2';
  
const App = () => (  
    <>
        <nav>
            <Link to='/'>Home</Link><br></br>
            <Link to='/page2'>Page2</Link>
        </nav>
        <Routes> 
            <Route path='/' element={<Home/>} />
            <Route path='/page2' element={<Page2/>} />
        </Routes> 
     </>
) 
  
export default App

Verify that your link is working (notice the url in the Browser)

Route Params - useParams()

Route parameter or URL parameter are a wellknown technique for passing values to a page during page-navigation, e.g '/user/1' if we wanted to view information about user #1.
In this exercise will we use Route Params to send a value to a page.

Step 10 (Update Page2.js)
Add imports of {Link} from 'react-router-dom', Page3 and Page4 (to be created in step 11-12). Add the following Link-tag for routing to Page3 and Page4

import React from 'react'
import { Link } from 'react-router-dom';
 
const Page2 = () => (
  <div>
    <h1>Page2 for React-Router Basic!</h1>   
    <Link to='/page3'>Page3</Link><br></br>
    <Link to='/page4/hej'>Page4</Link>
  </div>
)
  
export default Page2

Step 11 (Page3.js)
Create a new file: Page3.js:

import React from 'react'
  
const Page3 = () => (
  <div>
    <h1>Page3</h1>
  </div>
)
  
export default Page3

Step 12 (Page4.js)
Create a new file: Page4.js:

import React from 'react';
import { useParams } from 'react-router-dom';
  
const Page4 = () => {
   const {id} = useParams()
   return (
         <div>
            <h1>Page4</h1>
            <h4>Id: {id} (passed as route params) </h4>
         </div>
    )
}
  
export default Page4

Step 13 (NotFound.js)
Create a new file: NotFound.js:

import React from 'react'
const NotFound = () => {
    return <h1>404</h1>;
  };
  
export default NotFound;

Step 14 (App.js)
Finally update App.js:

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from './Page4';
import NotFound from './NotFound';
  
const App = () => (  
    <>
        <nav>
            <Link to='/'>Home</Link><br></br>
            <Link to='/page2'>Page2</Link><br></br>
            <Link to='/page3'>Page3</Link><br></br>
            <Link to='/page4/4'>Page4</Link><br></br>
        </nav>
        <Routes> 
            <Route path='/' element={<Home/>} />
            <Route path='/page2' element={<Page2/>}/>
            <Route path='/page3' element={<Page3/>} />
            <Route path='page4/:id' element={<Page4/>} />
            <Route path='*' element={<NotFound/>} />
        </Routes> 
     </>
) 
  
export default App

Congratulation! - Yes Route is nice and simple!

/ Henrik H