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

Understanding the Selenese command in Selenium IDE? – User friendly Tech help

ByMatteo

What is selenese command? n n n n n n Learn to ask Questions n n n nnSelenese is set of commands used by selenium to automate the web application testing. These commands are divided into 3 parts which is interpreted by selenium core (engine of selenium) to perform action on application under test. Particularly these…

Tooltip that follows cursor using Directive in AngularJS – User friendly Tech help

ByMatteo

How to create a custom tooltip using Directive in AngularJS? n Scenario: – n Today our target is to create a tooltip which is visible on mouseover an HTML element. n Approach: –  n We would utilize “Directive” methodology of Angular JS in achieving this. n Incase You like our tutorial, please help us to share it with…

How to add CSS modules into your react Application? – User friendly Tech help

ByMatteo

n “Believe in yourself && Keep Learning” n n Step1:- In our example we have take “create-react-app” template as reference. Install this and than perform “yarn eject” n What is yarn eject:- it will give you control of the create-react-app and you can install or play with config settings or package.json file. n Step2:- Search…

JavaScript Questions-(Part-2) – User friendly Tech help

ByMatteo

n n n n n Prepare well to crack Interview’s n n n nn1.What is the functionality of DOM?nn2.Tell different ways to refresh the page?nlocation.reload()nhistory.go()nwindow.location.hrefnn3.How to assign value to ViewState?nViewState.Add(“Name”,”UFT”);nViewState[“Name”] = “UFT”;nn4.What is the output of JS Code?nvar title=”User Friendly Techy Help”;nvar char = title[13];nalert(char);nn5.How to make this string capitalize “UFT”;nn6.What will be the output…

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:-…

Handy tips while working with Salesforce Vlocity Dataraptors – User friendly Tech help

ByMatteo

Problem- How to improve productivity while working with Dataraptors n 1)Always start with creating new version of the dataraptor, it avoids overwriting the existing stable changes, or you can always fall back to previous versions in case your changes don’t work as expected. n 2)In Extract Data raptor, to fasten the mapping process, its better…