Firstly , it's very important to wrapping our App Component with BrowserRouter tags when we use the React Router . we can wrap the app.js component directly or we can wrap it into the index.js file.

index.js:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

---

<Route path="/" component={Home} />

if path is equal to " / " the Home component will render.

And we can write it with another syntax:

<Route path="/" > <Home /> </Route>

---

what does EXACT mean in React Router ? Answer : it makes sure that it only returns the route if the path is an EXACT match to the current url.

---

With React Router we can:

1- prevent the default reload of the page using NavLink and Link tags instead of the anchor tag .

2- prevent the request from being sent .(No request is sent after clicking at Home in navbar for example , because when Home is clicked React will request your home page from the React Router Dom and not from the server and that will save time and effort.

---

import {Link} or  {NavLink} from 'react-router-dom';
using Link or NavLink

//html
<a href="/Home">Home</a>

// using React Router 
<Link to="/home">Home</Link>

Link and NavLink don't send a request. we can see that on the network

---

We can use NavLink instead of Link. it's the same but with a small difference,the class active which its added automatically when we click Home.. home

we can change the name of the class in the NavLink by using the activeClassName attribute:

example:

<NavLink activeClassName="selected">Home</NavLink>

---

Route Params:

App.js

<Route path="/blog" component={blog}/>

Blog.js

console.log(props);

object {history: {…}, location: {…}, match: {…}, staticContext: undefined}

props.match.params or props.match.path

---

Function of Switch:

I was experimenting with the route tag and didn't add Switch wrapped around the Route but it is still showing the product details page in the new URL.

In lecture 281. Adding a "Not Found" Page, Max introduces the '*' path, which matches anything. You need to use it in any app. And to use it as you want, you need it wrapped in a .

So in this particular case we could have used just the exact property, but in any possible real app I can think of, you also always need a .

If you are not using Switch, you must add exact prop to all of the Routes.

---

Nested Routes that react router dom offers

react-router-dom's Switch only allows the first (of a multiple) match to render. two stage Route" localhost:3000/products/p1 "two stage" meaning: ....com/stage-one/stage-two

---

Defining the main routes we need -page which shows all quotes

-quotes detailed page when we click on a single quote we would go to that page and we had that page for adding a brand new quote so we have 3 different pages to register.

---

For me:

test_params hye shagle enta beda5ela 3ade bel url bi idak fa bye5dak 3al component li enta hato bel route.

let test = props.match.params.test_params; console.log(test)

---

For me:

nehna badna iza katabna shi m3ayan bel path ano ye5edna 3ala el saf7a baas...mesh ano iza rehna 3al home maslan ..kamen yetla3le mu7tawa el Rout component! So shu el 7all?

fi shagle mawjude bel Route esma "Switch" kif mna3lma? mnhet kell el Route bel Switch

ex:

el switch btshuf iza el path li enta btektbo fo2 bi neseb aya path bel Routes w bi 7ammel el saf7a el matlube 3a aseso..hala2 iza ken el path hik /:test ex...w enta keteb dynamic data..bi neseb heda " /:test " yaane.

bi barem 3a awal path w 3al start taba3o w byam3ul match 3le...bas yle2i bya3mul stop w khalas w mabikamel 3al be2e.that's how it behaves.

---