# React Router --- ## What is React Router Route Matching(Mapper): React Router is about mapping a path to a finction or a component *NOTE: we've seen this type of behavior before* --- ## How does it work React router intercepts the request and looks for the route / path and returns the matched component. React router handles this at the DOM level. NOTE: The way we used to make request a server needed to present to be able to handle the request. --- ## Installation `npm install react-router-dom` --- ## Terminology ``` - BrowserRouter - Routes - Route - Link ``` --- ## BrowserRouter ```BroswerRouter```: We wrap our entire application with the `BrowserRouter` interface so that we can have access to routing across the project. `BroswerRouter` stores our current location. It utilizes the browsers built in history stack so that we are able to perform navigation. ``` // import import { BrowserRouter } from 'react-router-dom' // usage <BrowserRouter> {/* Application Logic ... */} </BrowserRouter> ``` --- ## Routes && Route ```Routes && Route``` : We utilize the `Routes` interface when grouping our routes together. `Route` on the other hand is primary in rendering our components when the path is match in the browser. ``` // import import { BrowserRouter, Routes } from 'react-router-dom' // usage <BrowserRouter> <Routes> <Route path='/' element={<ComponentToRender/>}/> </Routes> </BrowserRouter> ``` --- ## Link && NavLink ```Link && NavLink```: These two interface is primary in pushing the new route. Useful in actions taken in the browser such navbars and button clicks. When the user taps on an element with`Link or NavLink` associated with it. The user will be navigated to the route. ``` //import import {Link, NavLink} from 'react-rotuer-dom' <Link to='/pathName'> Path </Link> //Usage <Link to='/pathName'> Path </Link> <NavLink to='/pathName'> Path </NavLink> // accessibility ``` ---