Importing React Router functionality needs to be done in a specific case by case basis, you need to pick and choose what parts you want to bring in from the library, like we do for Browser Router and Route below.
import {BrowserRouter, Route} from ‘react-router-dom
Wrap your other components in a BrowserRouter component.
Using the Route component from React Router Dom, we can create paths that we can navigate to using our url and specify which component we can to load in that particular path.
Components passed in a route will also come with some additional inherit props added to them which will help you with routing and directing needs: Path, History and Location.
Additionally, the exact attribute can be used to specify exact paths to navigate to. The path prop will look for anything that includes the path string. It is common practice to label your home route with exact, otherwise you will always see the component with a path of / since they all start with it.
<Route exact path='/' component={Home} />
A Route can be passed with a param, which can be used for dynamic requests, similarly to the way we worked with params doing express.js
<Route path=“/person/:id” component={Person} />
This id can be accessed in the component by using props
props.match.params.id
Or by using the useParams hook which is included with React Router Dom
Components that are rendered inside the <BrowserRouter> but not inside a specific route will be shown on every page in the location it was placed. In the following example, the <NavBar/> will always appear at the top of the page.
React Router Dom also comes with components that we can use for in app navigation purposes. NavLink and Link. These components allow seamless navigation between pages on a site without requiring reloads or refreshes. The min prop to be passed is to which will take the path.
NavLink as opposed to Link will also have an active props which will be able to identify which path is currently active in the url and will allow you to interact with active to assign styling or implement in JS logic.
One of the most important features of using React is triggering “re-renders”. The simplest way of doing this is by changing a component’s state “reader” by using its “writer”. This will trigger React to check to see what has changed and update the DOM with the corresponding changes while leaving everything else the way it was.
08/27 Day 23 Lecture Notes
React Router
https://reactrouter.com/web/guides/quick-start
yarn add react-router-domImporting React Router functionality needs to be done in a specific case by case basis, you need to pick and choose what parts you want to bring in from the library, like we do for Browser Router and Route below.
import {BrowserRouter, Route} from ‘react-router-domWrap your other components in a BrowserRouter component.
https://reactrouter.com/web/api/BrowserRouter
Using the Route component from React Router Dom, we can create paths that we can navigate to using our url and specify which component we can to load in that particular path.
<Route path=“/about” component={AboutPage} />https://reactrouter.com/web/api/Route
Components passed in a route will also come with some additional inherit props added to them which will help you with routing and directing needs: Path, History and Location.
Additionally, the
exactattribute can be used to specify exact paths to navigate to. Thepathprop will look for anything that includes the path string. It is common practice to label your home route with exact, otherwise you will always see the component with a path of/since they all start with it.<Route exact path='/' component={Home} />A Route can be passed with a param, which can be used for dynamic requests, similarly to the way we worked with params doing express.js
<Route path=“/person/:id” component={Person} />This id can be accessed in the component by using props
props.match.params.idOr by using the
useParamshook which is included with React Router Domimport { useParams } from "react-router-dom"const { id } = useParams()https://reactrouter.com/web/api/Hooks/useparams
Components that are rendered inside the
<BrowserRouter>but not inside a specific route will be shown on every page in the location it was placed. In the following example, the<NavBar/>will always appear at the top of the page.React Router Dom also comes with components that we can use for in app navigation purposes.
NavLinkandLink. These components allow seamless navigation between pages on a site without requiring reloads or refreshes. The min prop to be passed istowhich will take the path.<Link to="/about">About</Link>https://reactrouter.com/web/api/Link
https://reactrouter.com/web/api/NavLink
NavLinkas opposed toLinkwill also have anactiveprops which will be able to identify which path is currently active in the url and will allow you to interact withactiveto assign styling or implement in JS logic.One of the most important features of using React is triggering “re-renders”. The simplest way of doing this is by changing a component’s state “reader” by using its “writer”. This will trigger React to check to see what has changed and update the DOM with the corresponding changes while leaving everything else the way it was.