Scribd
Upload
12 views

Exercise 12 - React Router

Uploaded by

khangpccse183245
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Exercise 12 - React Router

Uploaded by

khangpccse183245
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

React Router

Objectives and Outcomes


In this exercise we learn to use the React Router to configure and set up navigation among various
pages in a React application. At the end of this exercise, you will be able to:

 Install and configure your application to use React Router


 Configure the routes for React router to enable you to navigate to various pages within your React
application

Installing and Configuring React Router


 First install React Router into your project by typing the following at the prompt:

npm install react-router-dom

 Next update ListOfPlayer.js file in the shared folder to update the players as follows:
export const data= [
{id: '1', name: 'Cristiano Ronaldo', cost: 20000000, club: 'Manchester United',
img:'assets/images/cr.jpg',
info:'Cristiano Ronaldo dos Santos Aveiro GOIH ComM born 5 February 1985 is a Portuguese
professional footballer who plays as a forward for Premier League club Manchester United and captains
the Portugal national team.'},
{id: 2, name: 'N Golo Kanté', cost:40000000, club: 'Chelsea', img:'assets/images/kante.jpg',
info:'N Golo Kanté (born 29 March 1991) is a French professional footballer who plays as a central
midfielder for Premier League club Chelsea and the France national team. Kanté is widely praised for
his work rate and defensive acumen.'},
{id: 3, name: 'Messi', cost:50000000, club: 'PSG', img:'assets/images/messi.jpg',
info: 'Lionel Andrés Messi born 24 June 1987, also known as Leo Messi, is an Argentine professional
footballer who plays as a forward for Ligue 1 club Paris Saint-Germain and captains the Argentina
national team. Widely regarded as one of the greatest players of all time, Messi has won a record
seven Ballon d Or awards, a record six European Golden Shoes, and in 2020 was named to the Ballon d
Or Dream Team. Until leaving the club in 2021.'},
{id: 4, name: 'Neymar', cost:220000000, club: 'PSG',img:'assets/images/neymar.jpg', info:'Neymar
da Silva Santos Júnior (born 5 February 1992), known as Neymar, is a Brazilian professional
footballer who plays as a forward for Ligue 1 club Paris Saint-Germain and the Brazil national team.
He is considered a versatile player, being able to play as either a central striker, second striker,
winger or occasionally as an attacking midfielder. A prolific goalscorer and renowned playmaker, he
is regarded as one of the best players in the world. Neymar has scored at least 100 goals for three
different clubs, making him one of three players to achieve this'},
{id: 5, name: 'Harry Kane',cost: 90000000, club: 'Tottenham', img:'assets/images/kane.jpg',
info:'Harry Edward Kane MBE (born 28 July 1993) is an English professional footballer who plays as a
striker for Premier League club Tottenham Hotspur and captains the England national team. Regarded as
one of the best strikers in the world, Kane is known for his prolific goalscoring record and ability
to link play.[4][5] He ranks as Tottenham second-highest all-time top goalscorer and the third-
highest Premier League all-time top goalscorer'},
{id: 6, name: 'Erling Haaland', cost: 150000000, club: 'Manchester City',
img:'assets/images/haaland.jpg', info:'Erling Braut Haaland (né Håland; born 21 July 2000) is a
Norwegian professional footballer who plays as a striker for Premier League club Manchester City and
the Norway national team. Considered one of the best players in the world, he is known for his
athleticism, speed and finishing.'},
{id: 7, name: 'Casemiro', cost:40000000, img:'assets/images/casemiro.jpg', info:'Carlos Henrique
Casimiro (born 23 February 1992), known as Casemiro,[4] is a Brazilian professional footballer who
plays as a defensive midfielder for Premier League club Manchester United and the Brazil national
team. He is widely regarded as one of the best defensive midfielders in the world. Formed at São
Paulo, where he scored 11 goals in 111 official games, Casemiro moved to Real Madrid in 2013, and
also spent 2014–15 on loan at Porto. He was part of the Real Madrid squad that won four Champions
League titles in five seasons, from 2014 to 2018. In total he won fifteen major trophies at Real
Madrid, including five Champions Leagues, three La Liga titles, one Copa del Rey and three FIFA Club
World Cups.'},
{id: 8, name: 'Raheem Sterling', cost:56020000, img:'assets/images/sterling.jpg',
info: 'Raheem Shaquille Sterling MBE (born 8 December 1994) is an English professional footballer
who plays as a winger and attacking midfielder for Premier League club Chelsea and the England

1
national team. Born in Jamaica to Jamaican parents, Sterling moved to London at the age of five. He
began his career at Queens Park Rangers before signing for Liverpool in 2010. He was awarded the
Golden Boy award in 2014.'},
{id: 9, name: 'Sadio Mané', cost:32000000, img:'assets/images/sadio.jpg',
info: 'Sadio Mané (born 10 April 1992) is a Senegalese professional footballer who plays as a
forward for Bundesliga club Bayern Munich and the Senegal national team. Considered one of the best
players in the world and amongst the greatest African players of all time, he is known for his
pressing, dribbling, and speed.'},
]

 Then, open index.js and update it as follows:


….
import { BrowserRouter } from 'react-router-dom';
…
<BrowserRouter>
<App />
</BrowserRouter>

Add a Contact Component (design by yourself)


Configuring the Router
 Open App.js file and update it as follows:
…
import {
Routes,
Route,
} from "react-router-dom";
…
function App() {
return (
<div>
<Navigation/>
<Routes>
<Route path='/' element={<Players/>}>
</Route>
<Route path='/detail/:id' element={<Detail/>}></Route>
<Route path='/contact' element={<Contact/>}></Route>
</Routes>
<Footer/>
</div>
)
}

 Open Players.js and update its contents with the following:


…
import { Link } from 'react-router-dom'
…
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>

Add a Detail component


 Design by yourself in file Detail.js, the screen displays the full information of the player as
follow:
2
 Open Detail.js and update its contents with the following:
…
import { useParams } from 'react-router-dom'
import { data } from '../Share/ListOfPlayers'
…
const userName = useParams();
const player = data.find(obj => {
return obj.id == userName.id;
});
let cost = player.cost.toLocaleString();
return(
<div className='container'>
<div className='product-card'>
<div className='badge'>{player.name}</div>
<div className='product-tumb'>
<img src={`../${player.img}`} alt=''/>
</div>
<div className='product-details'>
<h4>{player.club}</h4>
<div className='product-price'>Market value: € {cost}</div>
<p>{player.info}</p>
<div className='product-bottom-details'></div>
</div>
</div>
</div>
)

Conclusions
In this exercise you learn about installing, configuring and using the React Router for navigation within
your React app.

You might also like