{"id":736,"date":"2021-08-29T11:01:31","date_gmt":"2021-08-29T10:01:31","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=736"},"modified":"2021-08-29T14:24:09","modified_gmt":"2021-08-29T13:24:09","slug":"working-with-react-router-in-react-js","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/working-with-react-router-in-react-js\/","title":{"rendered":"Working With React Router in React JS"},"content":{"rendered":"\n

Routing and navigation are inevitable in most software applications<\/p>\n\n\n\n

The way you would handle routing and navigation in React JS<\/a> is somewhat different from the way you would, let’s say, in traditional HTML.<\/p>\n\n\n\n

In this tutorial we shall see how to work with React Router in React JS<\/p>\n\n\n\n

So let’s get straight to the point, shall we.<\/p>\n\n\n\n

<\/p>\n\n\n\n

1. First, you want to create your React project:<\/h2>\n\n\n\n
npx create-react-app yourFolderName<\/code><\/pre>\n\n\n\n
2. Then add the React Router dependency<\/h2>\n\n\n\n
yarn add react-router-dom\n\n        or \n\nnpm install react-router-dom<\/code><\/pre>\n\n\n\n
3. Next, start the app<\/h2>\n\n\n\n
yarn start<\/code><\/pre>\n\n\n\n
Let’s just design a simple nabber for our application. In your App.js (any other convenient file of your choice) add the following:<\/p>\n\n\n\n
 <ul className=\"nav-link-style\">\n <li>Home<\/li>\n <li>About<\/li>\n <li>Contact<\/li>\n <li>Services<\/li>\n <\/ul><\/code><\/pre>\n\n\n\n
Let’s add a bit of styling our App.css<\/p>\n\n\n\n
 .nav-link-style {\n   display: flex;\n   flex-direction: row;\n   justify-content: space-evenly;\n   align-items: center;\n   list-style: none;\n }<\/code><\/pre>\n\n\n\n
Here’s our output for now:<\/h2>\n\n\n\n
<\/p>\n\n\n\n
\"\"
React JS Routing and Navigation<\/figcaption><\/figure>\n\n\n\n
Next, let’s add the Routing Logic<\/h2>\n\n\n\n
We will create a separate file and call it RouteFile (or whatever you decide to call yours, but it must not be Route or Router). This will handle our React Router We will add the following code to our RouteFile.js<\/p>\n\n\n\n
import React from 'react';\nimport {BrowserRouter as Router, Switch, Route} from 'react-router-dom';\nimport App from '..\/App';\n\n\nfunction RouteFile(){\n    return(\n        <Router>\n            <Switch>\n                <Route exact path=\"\/\" component={App} \/>\n            <\/Switch>\n        <\/Router>\n    )\n}\n\nexport default RouteFile;<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
So, here’s our routing file and we only have one Route (or navigation) here. Notice we have the word “exact” and for path we have the “\/” and our component App.js. This means the App.js file is our landing page. When anyone visits our our website for the first time, they will land on the App.js file. <\/p>\n\n\n\n
This is similar to our default index file in html.<\/p>\n\n\n\n
What we want to do next is to create file components for other screens and link them accordingly.<\/p>\n\n\n\n
Here’s what our Routing File looks like<\/h2>\n\n\n\n
import React from 'react';\nimport {BrowserRouter as Router, Switch, Route} from 'react-router-dom';\nimport About from '..\/About';\nimport App from '..\/App';\nimport Contact from '..\/Contact';\nimport Services from '..\/Services';\n\n\nfunction RouteFile(){\n    return(\n        <Router>\n            <Switch>\n                <Route exact path=\"\/\" component={App} \/>\n                <Route  path=\"\/about\" component={About} \/>\n                <Route  path=\"\/contact\" component={Contact} \/>\n                <Route  path=\"\/services\" component={Services} \/>\n            <\/Switch>\n        <\/Router>\n    )\n}\n\nexport default RouteFile;<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
One advantage of Routing in React JS is that we able to customise our url to something short, simple and unique. <\/p>\n\n\n\n
So, here’s the full code for our App.js file<\/p>\n\n\n\n
import React, { Component } from \"react\";\nimport \".\/App.css\";\nimport { Link } from \"react-router-dom\";\n\nclass App extends Component {\n \n  render() {\n    return (\n      <div>\n        <ul className=\"nav-link-style\">\n          <li><Link to=\"\/\">Home<\/Link><\/li>\n          <li><Link to=\"\/about\">About<\/Link><\/li>\n          <li><Link to=\"\/contact\">Contact<\/Link><\/li>\n          <li><Link to=\"\/services\">Services<\/Link><\/li>\n        <\/ul>\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Finally, to make our Routing take effect, we need to set our RouteFile.js as the default starting component in our index.js file. Usually, the default component is App.js. But will replace that as follows:<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\nimport RouteFile from '.\/Routes\/RouteFile';\n\nReactDOM.render(\n  <React.StrictMode>\n    <RouteFile \/> \n  <\/React.StrictMode>,\n  document.getElementById('root')\n);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Here’s how it works now:<\/h2>\n\n\n\n