Since you started learning React, you have been building Single
Page Applications in which you didn't need to click a link that directs you to another page. In most cases, you will be building websites with multiple pages. I am sure you have done this before with the anchor
element of HTML so its not new at all. In the multiple web page applications that you built without react, you must have realized that every time you click a link, the page loads before it can render what you are looking for. In this article, I present to you the React way of doing things where you can navigate pages seamlessly without refreshing the page with the help of an installable package called `react-router-dom.
The react-router-dom
is publicly availabe as a node package and can be installed using node package manager (npm
) into the node modules directory of your application. In order to download `react router dom, run the following command in your terminal.
npm install react-router-dom
The package will be downloaded as a production dependency. You can have peek at the package.json
file of your project under dependencies to see that react-router-dom
has been installed.
Importing react-router-dom
and setting routes.
In order to take advantage of react-router-dom
we need to import a few components from it. The Components include BrowserRouter
, Routes
and Route
and can be imported using the following line
import {BrowserRouter, Routes, Route} from 'react-router-dom'
Once these three components have been imported, it is our turn to set up the routes. There are many ways to do this as you will find out by more practice and from other devs. What I am about to show you is just one of them, point is, stay open minded.
In this exapmle we are going to create a component called RouteSwictch
, this is where all our Routes
are going to live in for better code organization. Now go ahead and create a file called RouteSwitch.js
, create the component and wrap Routes
inside BrowserRouter
as shown in the code snippet below.
const RouterSwitch = () =>{
return (
<BrowserRouter>
<Routes>
</Routes>
</BrowserRouter>
);
}
Now all our routes are going to wrapped inside the Routes
wrapper as Route
components with path
and element
as props.
path
is the path to a specific react component
that we want to render when the link to that specific path
is clicked. The element
prop represent the component
to display.
Let's go into App.js
component, add something to display, and add the path to it in the RouteSwitch
component.
export const App = () =>{
return (
<h1>This is Home<h1>
);
Adding App path to Routes
import Home from './App'
export const RouterSwitch = () =>{
return (
<BrowserRouter>
<Routes>
//Adding Route for App
<Route path ='/' element ={<App/>}/>
</Routes>
</BrowserRouter>
);
}
After adding the Route
your RouteSwitch
file should look like the above code block. Leaving the path
value as "/"
makes the component on that path display by default when the app is launched.
In order to display the App
component as we desire, we need to go into the index.js file, import RouteSwitch
, and change the code rendering App
to render RouteSwitch
instead.
import RouteSwitch from './RouteSwitch'
//Inside root.render
<React.StrictMode>
<RouteSwitch />
</React.StrictMode>
Start the development server using the command npm start
and view the first page that loads. If you see the text 'This is home' displayed then we are good to go and add another route with a link from App.js
.
Adding another Route
This time we are going to create a component called About
and add a link to it in the App
component.
export const About = () => {
return (
<h1>About</h1>
);
}
Go to App
component and add link to About
. In order to link the two components the React way, we need to import a component called Link
from react-router-dom
and provide a path and the component to be displayed.
import {Link} from 'react-router-dom'
import About from './About'
export const App = () =>{
return (
<>
<h1>This is Home<h1>
<Link to ='/about' component = {<About />}>
About
</Link>
</>
);
The last thing we need to do for this link to work is to add a Route
for the About
component in Routes
as shown below.
import Home from './App'
import About from './About'
export const RouterSwitch = () =>{
return (
<BrowserRouter>
<Routes>
//Adding Route for App
<Route path ='/' element ={<App />} />
//Route for About
<Router path ='/about' element ={About />} />
</Routes>
</BrowserRouter>
);
}
Test this and click the link to About to see your About page displayed.
You must be curious about how we can get back to App
. Well, that simply creating a link from About
to App
in About.js
and this time we do not have to add another Route
because it's already there. The adjustments added below should do the work.
import App from '/App'
import {Link} from 'react-router-dom'
export const About = () => {
return (
<h1>About</h1>
<Link to = '/' component = {<App />} >
Home
<Link />
);
}
In conclusion, React routing is a wide topic that we can not cover
in one lesson but this should get you started with the basic. Keep in mind that there are other React routing libraries in addition to react-router-dom
. To find more about react-router-dom
, see the documentaion here. Happy learning.
Top comments (0)