Video Tutorials

Policy

Twitter LogoFacebook Logo
Routing
Introduction to React Router
By: King

Hello, in this tutorial, we'll go over what is Routing.

Routing often refers to navigating from one page to another. However, React's library does not come with this feature. 

To make this possible, we need to create our own routing functionality or use some already made packages from the React Community to enable routing.

The one we are going to use is React Router.

Installing React Router Package

Navigate to your React project directory from your terminal and install react-router-dom:

npm i react-router-dom

Defining your Routes

Step 1:

Once the package is installed, import these 3 components inside the App component (App.js). 

This will allow us to use the components in react-router-dom and define the routes for our application.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

Step 2:

Use BrowserRouter and Routes to define the area for routes to be added.

<BrowserRouter>
   <Routes>
        
   </Routes>
</BrowserRouter>

Step 3: 

Add a Route component inside the Routes for each route in the application.

<Routes>
   <Route path="/" element={ <MyFirstComponent/> } ></Route>
   <Route path="/page2" element={ <MySecondComponent/> } ></Route>
</Routes>

Each Route component has a prop call path and element.

The path prop refers to the segment after the hostname of the URL. For example, in codeible.com/home, the hostname is codeible.com and the path is /home.

In the code snippet, the first Route's path is just a forward slash ("/") which means the root. So, if we use the codeible.com case, to activate the route for the path "/" - we'll just need to go to codeible.com or codeible.com/.

For /page2, we'll do codeible.com/page2.

Example with the local environment

path="/page2"
localhost:3000 or localhost:3000/

path="/"
localhost:3000/page2

The element prop refers to what component we want to display when the route is activated. 

The Default Route

So far, we covered how to add a Route. 

In the above examples, there are 2 Routes for paths - "/" and "/page2". So when you go to localhost:3000, it'll display MyFirstComponent, and when you go to localhost:3000/page2, it'll display MySecondComponent.

But when you try to use any other routes like localhost:3000/page3, nothing will be displayed since it was not defined.

In this section, we'll see how to define a Default Route so that if the user navigates to an undefined route, it'll display something instead of nothing, usually a 404 page.

Step 1:

Create the Error component:

ErrorComponent.js

function ErrorComponent(){
    return (
        <h1>404 - Page not found.</h1>
    );
}

export default ErrorComponent;

Step 2:

Add a new Route at the bottom of the Routes component.

<Route path="/" element={ <MyFirstComponent/> } ></Route>
<Route path="/page2" element={ <MySecondComponent/> } ></Route>
<Route path="" element={  } ></Route>

Step 3: 

Set the path to " * " (asterisk) with the desired component to display.

<Route path="*" element={ <ErrorComponent /> } ></Route>

Now when the user enters any routes that are not defined, the Route with the asterisk (*) will be activated.

Activating the Routes in the App

Now that the Routes are defined, we know that we can activate them by changing the URL. But that's not really a good experience for the user. 

One way to activate the routes is to use the Link component from react-router-dom.

In this exercise, you should have 2 components: MyFirstComponent and MySecondComponent.

Step 1: 


Create the components

function MyFirstComponent(props){
    return (
        <div></div>
    );
}
export default MyFirstComponent;

function MySecondComponent(props){
    return (
        <div>Page 2</div>
    );
}
export default MySecondComponent;

Step 2: 

Then you should have the routes defined in App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import MyFirstComponent from './components/MyFirstComponent';
import MySecondComponent from './components/MySecondComponent';

function App() {
  return (
    <BrowserRouter>
      <Routes>
         <Route path="/" element={ <MyFirstComponent/> } ></Route>
         <Route path="/page2" element={ <MySecondComponent/> } ></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 3:

Import the Link component in MyFirstComponent.

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

Step 4:

Add the Link component in MyFirstComponent.

function MyFirstComponent(props){
    return (
        <div>
             <Link>Go to Page 2</Link>
        </div>
    );
}
export default MyFirstComponent;

Step 5: 

Add the "to" prop to the Link component and specify the route to activate. In this case, we want to go to "/page2"

<Link to="/page2">Go to Page 2</Link>

Now when the app is started on localhost:3000, you should see a link that we can click on.

Image from Codeible.com

If it is clicked, it'll activate the "/page2" route and display whatever is in MySecondComponent.

That's all for the introduction to routing!


Sign In