Working with React-Router? – User friendly Tech help

ByMatteo

“An investment in knowledge pays the best interest.” Benjamin Franklin
n
nIn our previous post we started with creating our first react app and than we learned about some basic terminologies in react. Today we are going to focus on creating the router behaviour using react library.
n
nIncase you want to learn about filtering in react check the github code. n

nPre-requites:- 
nGithub for React Router
n

n

npm install --save react-router-dom

n

Key Terms:-
n
n1) BrowserRouter, this component listens to changes in URL and display the correct screen on UI
n

n

    n

  • Import Browser router in src/index.js  (Line 6 in the below code example)

    • n

  • Enclose component inside (Line 8)

    • n

n

n

n

n

n

n

n

 1 2 3 4 5 6 7 8 9
10
 n

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(,
 document.getElementById('root'));registerServiceWorker();

n

n2) Link, this component accepts the to property which directs the app to the given path. 
n

n

n

n

n

n

n

n

123
4
 n

 Add Contact

n

>ContactLink component fully renders a proper anchor tag (a) with the appropriate href, you can expect it to behave how a normal link on the web behaves.
n
n3) Route Component, this component is a critical piece of building an application with React Router because it’s the component which is going to decide which components are rendered based on the current URL path.

n

n

n

n

n

n

n

12
3
 n

n

Working Code with Router

Was this article helpful?
YesNo

Similar Posts

How to Catch Exceptions in Java? – User friendly Tech help

ByMatteo

We understood the basics of Exception in Java, now we will move towards handling these exceptions. We are aware of the fact that when error is detected, an exception is thrown. This means the normal code execution stops and the control are transferred to the catch clause for that exception of the first enclosing try…

Robot Framework- Working with Excel Library(Part-2) – User friendly Tech help

ByMatteo

Life is short..share while you still have knowledge.nWe started with installation of Excel Library in Robot Framework , today we would focus on utilizing the keywords present in the Excel Library.nNext is publishing run results into ExcelnnWe can connect on Fb,G+,Twitter to spread more learning.nnScenario:- How we can fetch data from Excel in Robot framework to parameter our test cases.nnSolution:-…

Prerequisites for starting with selenium webdriver? – User friendly Tech help

ByMatteo

Whole automation fraternity is crazy about the emerging demand of selenium.Today we are sharing our 1st post on selenium.We are not doing something out-of-box, however we tend to start a basic step towards helping people learn Selenium.Hope our this initiative can guide and mentor our budding automation coders.nnRequirement:- What is required to execute and get…

Introduction to JAVA – User friendly Tech help

ByMatteo

Have faith, love and courage to learn and share with others.That is what we at uftHelp believe in.nnWe are starting this series of tutorials with focus on JAVA programming language.Do follow us on Fb,G+,Twitter for more updates.n History:-nIt kick-started in 1991, when a group of Sun Microsystem engineers team (called as Green Team, led by James Gosling) put up their efforts…