Getting Started with React Router
What You know from this article :
- What is React Router
- Create a New React Project
- How to install it and configure in React Project
- Static Routing
- Dynamic Routing
- API Hooks use in React Router
1.React Router:
React Router is the standard routing library for React.React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates.
2. Create a New React Project:
Firstly, will open an Code Editor that name is (Visual Studio Code).After that , simply open the terminal section…
Secondly , I will create a react app that name is (react-router-practice) by this following command in the terminal:
Thirdly, Make sure you have to work with right directories/folder. if you have not in right folder then you have command on terminal ..
Wow,, Your first React project is created.Enjoy with one cup of coffee.
3. Install React Router:
To,,install React Router in Your Existing React project (react-router-practice) then you have simply write on the terminal by this following command.
Now You have to waiting for install complete!!!!!!!.To know more about you have to visit the link : https://reactrouter.com/web/guides/quick-start
Configure React Router:
As you know to install something from react you have to import all feature as you have to used in your project.For use React Router You have to must import some module form “react-router-dom” in App.js
(i)BrowserRouter => BrowserRouter is used for doing client side routing with URL segments.<BrowserRouter>, is usually given an alias of ‘Router’ and this is the parent component that is used to store all of your <Route> components.
(ii) Switch => The <Switch> Component render the first route that matches the path.It also allows Nested Routing.
(iii) Route => It will only separate components Route based on the url path.It allow to show at a time one Route only. For example..
(iv) Link => The <Link> will create url anchor for single page application.It seems to be like …
Let’s start our journey on React Routing……
Firstly ,select (src) folder and create a folder in this directory,, that name is (components) . Now select components folder and create two file ( first one is Friend.js and second one is Food.js.
After that ,,, Just create functional component on this file…Do not Worry about it … it seems like very easy if you familiar with React.
In Friend.js file..
This simple quite easy task..In this component I will use simple <Link> component that present the anchor url. Also used an attribute to=”/friend” that is static path .Once you have used <Link> then you must import it.
In Food.js file..similar all the pattern as you work previous component.
Wow…that’s great you are created two different component in ReactJs.
4. Static Routing:
Static routing is a form of routing that occurs when a router uses a manually-configured routing entry.
Now open the App.js file and set React Router. How to use React Router in App.js file . The answer quite easy….
Firstly, open the App.js file and configure React Router,,,,It seems to be like as
Firstly Router apply on the Friend.js file……….You must import Friend.js file in the App.js. (show App.js file in below)
So,,,nice you have to used React Router in staticly. Now You have command the terminal …..
=> npm start
After start your server then you will see “Nothing”. Why Nothing?
Because you manually set the static path=”/friend” . So you do not see anything.The problem is solved easily … do not be upset!!!
Just Write where your project is open such as (Chrome Browser).Just type the
=> localhost:3000/friend
Then you see your dream output like as……
Similarly use Food.js Component and use Other Functionality:
This time I will add more Route except Friend and Food Component.
The “exact” and “*” …Is that right!!!!!!!!
Okay,,,exact means the path of url which matches the url. It allows to match the “/” after exact route finding. if finding “/something” it will not interact correctly.
“*” What!! It quite easy. For example, when you visit website page ,, sometimes it will show 404 error occured …that means it does not match any url path of the route so that It will showing Error Message 404 or something else.
Any Confusion of Static Routing!!!!!!!!
What happen you do not know the exact url path but you have to do something ? The answer is very easy then you have to use Dynamic Routing
5.Dynamic Routing:
when Dynamic Routing use!!! The answer is ….Suppose You have some country with unique code . when specific country show in the url path then you have to show the country detail.
Just you have to pass the unique code of the country in the route path.
It looks like…….Firstly , create a component Country.js then write into inside the component……
<Link to={“/country/”+code}>Dynamic Routing</Link>
After that Create a component CountryDetail.js and Route look like….
Note: (:code) means we are just passing parameter that name is code.
The Question in your mind How to access the parameter. The answer is very simple…we called a Hook that name useParams(). it return a object of values that matches the path of the url.
Now go to the CountryDetail.js component use the Hook . You must import it remember that everytime.
Is that very Hard!!! No this is little bit confusion so i clear the confusion.
=> const{code} = useParams();
Here, Code is the parameter name that we previously declare in the Route.we just destructuring the parameter from Hook. We can get the code parameter’s value from code variable.
Wow …..You complete the React Router series. Now apply this logic and create many other SPA(Single Page Application) .
Wish You All The Best!!!