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 randomize rows of data in a Excel? – User friendly Tech help

ByMatteo

Problem:- How to randomize the given set of data in an Excel?nnSolution: – We would try to shuffle the rows of data in a given excel. We would try it manually first followed by code written in Vb-script.nnnManual Approach:- nStep1:- Add column(say Random) in the starting of the excelnnStep2:- Apply formula to the first cell (=Rand ())…

Apex Superbadge (part-1) – User friendly Tech help

ByMatteo

Scenario: Automate Record Creation Install the unmanaged package for the schema and stubs for Apex classes and triggers. Rename “cases” and “products” to match the “HowWeRoll” schema. Assign all profiles to the custom “HowWeRoll” page layouts for these objects. The goal is to automatically create a “Routine Maintenance” request every time a maintenance request of…

vscode – User friendly Tech help

ByMatteo

import { LightningElement, track } from ‘lwc’; export default class HelloLWC extends LightningElement { //default values @track typedValue = ”; salutationOptions = [ {‘label’: ‘None’, ‘value’: ‘None’}, {‘label’: ‘Mr.’, ‘value’: ‘Mr.’}, {‘label’: ‘Ms.’, ‘value’: ‘Ms.’}, {‘label’: ‘Mrs.’, ‘value’: ‘Mrs.’}, {‘label’: ‘Dr.’, ‘value’: ‘Dr.’}, {‘label’: ‘Prof.’, ‘value’: ‘Prof.’}, ]; //method on click of button handleClick(){ const…

How to implement Highlight in Selenium WebDriver? – User friendly Tech help

ByMatteo

Highlight is the most prominent feature used in Object Spy in UFT/QTP. But the question comes into our mind can we have the same facility in Selenium also?.nnAnswer is YES!!n n n n n n n I want to highlight object in selenium n n n Why we use Highlight?nHighlight plays crucial role in  debugging…