The birth of reactjs really solve a lot of problems, including making of Single Page Application (SPA) which gave our web site this app like feeling.
Making SPA is made possible in reactjs using a process called ROUTING. This routing is done using "react-router-dom". Since react keeps growing, we have also seen different versions of react-router-dom, like the version 4, and 6(latest).
And I feel from experience the version 6 made things easy for react developers.PREREQUISITES
- Javascript
- React components
SETTING UP "react-router-dom@6"
Before you can be able to run react on your system, you must have nodejs install on your system.
STEP 1
Import " react-router-dom@6 ", using the commands below on your terminal
The commands below is dependent on the package manager you are using.
- npm install "react-router-dom@6"
- yarn add "react-router-dom2@6"
STEP 2
After the installation of react-router-dom, we have to make use of some features that comes with it.
Firstly, we have to make the React Router available everywhere in the app.
So in our index.js, we must import BrowserRouter from react-router-dom.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Above is how our index.js is, after importing of BrowserRouter, the we have this look
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
Let us talk about "BrowserRouter"
BrowserRouter
This is one of the features that came with react-router-dom version 6, which makes our UI in sync with it URL i.e this explain that ,it allows the UI displayed correspond with it URL.
STEP 3
We must setup components to which we will be navigating/routing to, like Home, About, Product components
Home.js
function Home() {
return (
<div>
<h1>This is the home page</h1>
</div>
);
}
export default Home;
About.js
function About() {
return (
<div>
<h1>This is the About page</h1>
</div>
);
}
export default About;
Product.js
function Product() {
return (
<div>
<h1>This is the Product page</h1>
</div>
);
}
export default Product;
STEP 4
In this step, you can decide to make a new component for setting up routes, e.g you can make a "Pages" component or most likely do it in your "App" component, which we will be doing.
Since we will be having our react code rendered from the App.js component.
In our App.jsapp.js
import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="about" element={ <About/> } />
<Route path="contact" element={ <Contact/> } />
</Routes>
</div>
)
}
export default App
The code above may seems confusing, but don't worry, we will be breaking it down soon. So let us start
From the code above, like we said that react-router-dom came with a lot of features which really makes routing very easy, just like our BrowserRouter, so we also have Routes and Route .
Routes
From the code above, our Routes serves as a container/parent for our individual routes that will be created.
Route
This is use to set up a single route. And it comes with attributes, which are path and element Route
path:- specifies the URL path of each component, it takes in the URL path you want to view in relation to the component set in our element, you can most likely give it any name , but by convention, it will be good naming it after your component name, which can be sewn from our code above
And you can notice that the first path value is a slash(/), this indicate the first page that will be render by react when our app/site loads.
element:- This is a/an props/attribute in the Route , that takes in the component you want to render/display , base on the "path" given or set. This explains the code above.
STEP 5
After setting up our router, as indicated from our code above, you will most likely have a navigation bar , with links which you can click on to navigate or move in between pages.
By convention we must set a component for our navigation bar. So let us do that below.
Navbar.js
const Navbar = () => {
return (
<nav>
<li> Home </li>
<li> About </li>
<li> Product </li>
</nav>
)
}
export default Navbar;
Among the features from react-router-dom is also "Link" , this is also more of like our "a" tag from our HTML, so our next step is to import "Link" from "react-router-dom"
import { Link } from "react-router-dom"
This should be done inside the component holding our navigation bar or the links we will be clicking on to navigate to other pages.
Our Nav.js component will now become this
Navbar.js
import { Link } from "react-router-dom"
const Navbar = () => {
return (
<nav>
<li> Home </li>
<li> About </li>
<li> Product </li>
</nav>
)
}
export default Navbar;
After importing Link into our Nav.js, we must enclose every of our link ( the
Navbar.js
import { Link } from "react-router-dom"
const Navbar = () => {
return (
<nav>
< Link to = "/">
<li> Home </li>
</ Link >
< Link to = "/about">
<li> About </li>
</ Link >
< Link to = "/product">
<li> Product </li>
</ Link >
</nav>
)
}
export default Navbar;
As we can see from our code above, the Link came with an attribute called 'to', since our 'Link' serve as our "a" tag from HTML , then the "to" attribute is our "href" from the "a" tag, which stores the path to the component we are navigating to, which is in relation to the path set in our Route, but with a slash(/) (a relative path )
ADDITIONAL STEP
In a case in which you want to style your link when it is been clicked on, then we can opt for another features from react-router-dom, which is the NavLink , this features will also follow the same process as our Link
Navbar.js
import { NavLink } from "react-router-dom"
const Navbar = () => {
return (
<nav>
< NavLink to = "/">
<li> Home </li>
</ NavLink >
< NavLink to = "/about">
<li> About </li>
</ NavLink >
<NavLink to = "/product">
<li> Product </li>
</ NavLink >
</nav>
)
}
export default Navbar;
The NavLink also have same attribute "to" as our Link.
STYLING OUR LINK WHEN ACTIVE
The advantage of using this NavLink over Link is that it comes with "isActive" which helps to add an "active" class to the link recently clicked
class = "active"
In order to style our link, we can either use "css modules, styled components, or inline css", but we will be going with inline css.
<NavLink to = "/"
style = {({isActive}) => {
return ( color : {isActive ? "red" : "blue"})
}>
<li> Home </li>
</NavLink>
The code above explains thus, Since "isActive " result into "true" or "false", so the above code uses ternary operator , where by when the link is clicked, it returns "true" and the color is been set to "red" and when we observe it from our developer tools we notice that the link click is with class = "active"
But when another link is been clicked on , the previous link will have it "isActive" been set to false and the styling is removed, while the recently clicked link will have "isActive" updated to true, and the style is been applied.
CONCLUSION
At this point , I think we should have been able to wrap our head around routing as a beginner, but there are even a lot more cooler features , which i will include in the second part of this article, features like
- Shared layout
- nested routes
- use of useParams
- useNavigate and so on...
you can check out other resources to like
- freecodecamp (video by code addict)
- netninja -Traversy media