React – Router

In this post, we will see how to manage the Routing in React.
In a nutshell, we will see how it is possible to move between different parts of an application.

First of all, we create a React project called “test router” (using the command npx Create-react-app testrouter) and we modify the file App.cs:

[App.css]

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF50;
}


Then, we add four files called home, about, info and notfound:

[home.js]

const home = () => {
    return ( 
        <div>
            <h1>HOME</h1>
        </div>
     );
}
 
export default home;


[info.js]

const info = () => {
    return (  
        <div>
            <h1>Info</h1>
        </div>
    );
}
 
export default info;


[about.js]

const about = () => {
    return (  
        <div>
            <h1>About</h1>
        </div>
    );
}
 
export default about;


[notfound.js]

const notfound = () => {
    return ( 
        <div>
            <h1>Page not found!</h1>
        </div>
     );
}
 
export default notfound;



Now, in order to manage the routing, we have to install a library called react-router-dom using the command
npm install react-router-dom.

After the installation, we create a new file called navbar where we will insert a menu:

[navbar.js]

import {Link} from 'react-router-dom';

const navbar = () => {
    return ( 
        <div>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/info">Info</Link>
            </nav>
        </div>
     );
}
 
export default navbar;


Finally, we modify the file App.js:

[App.js]

import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './navbar';
import Home from './home';
import About from './about';
import Info from './info';
import Notfound from './notfound';

function App() {
  return (
    <Router>
      <div>
        <Navbar/>
        <div>
          <Switch>
            <Route exact path="/">
              <Home/>
            </Route>
            <Route path="/about">
              <About/>
            </Route>
            <Route path="/info">
              <Info/>
            </Route>
            <Route path="*">
              <Notfound/>
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;



We have done and now, if we run the application, this will be the result:






CREATE A LINK

Now, we will see how to insert a link in the page notfound for coming back in Home:

[notfound.js]

import { Link } from "react-router-dom"

const notfound = () => {
    return (  
        <div>
            <h1>NOT FOUND</h1>
            <Link to="/">Back to the Home</Link>
        </div>
    );
}
 
export default notfound;


If we run the application, this will be the result:



USE PARAMETERS

Now, we will see how to pass a parameter from the Home page to the Info page:

[home.js]

import { Link } from "react-router-dom"

const home = () => {
    var value = "damiano";

    return ( 
        <div>
            <h1>HOME</h1>
            <br/>
            <Link to={`/info/${value}`}>Send value to Info</Link>
        </div>
     );
}
 
export default home;


[info.js]

import { useParams } from "react-router";

const Info = () => {
    const{name} = useParams();

    return (  
        <div>
            <h1>Info</h1>
            <h2>The value from Home is: {name}</h2>
        </div>
    );
}
 
export default Info;


[App.js]

import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './navbar';
import Home from './home';
import About from './about';
import Info from './info';
import Notfound from './notfound';

function App() {
  return (
    <Router>
      <div>
        <Navbar/>
        <div>
          <Switch>
            <Route exact path="/">
              <Home/>
            </Route>
            <Route path="/about">
              <About/>
            </Route>
            <Route path="/info/:name">
              <Info/>
            </Route>
            <Route path="*">
              <Notfound/>
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;



If we run the application, this will be the result:




IN THIS POST WE HAVE SEEN THE BASIC COMMANDS OF REACT ROUTER.
FOR ALL INFORMATION, WE CAN READ THE
“REACT ROUTER DOCUMENTATION“.