react-router-domlibrary. Routing is how a web applications direct traffic.
categoriesand filling it with a bunch of files like
react-router-dom, and pull in data dynamically through the URL. Below is the source of the completed project if you get lost along the way.
react-router-domfor the router, and
axiosfor making API calls.
react-router-dom, we need to wrap our entire
BrowserRouter. There are two types of routers:
BrowserRouter- makes pretty URLs like
HashRouter- makes URLs with the
octothorpe(or hashtag, if you will) that would look like
App.js, we can decide on the routes we want to use and direct accordingly. We'll use
Switchfor this task.
Switch- Groups all your routes together, and ensures they take precedence from top-to-bottom.
Route- Each individual route.
HomePage, and dynamically matching any other page to
UserPage. I only have one route for this simple example, but you could do more like this:
dataworld.com/categorieswould go to a page listing all categories, but
Link. If we used the traditional
<a href="/route">, it would make a completely new request and reload the page, so we have
Linkto help us out.src/pages/HomePage.js
HomePage, and I see the content and the link.
Linkis navigating to
/dataworld, which will match the
Route. In order to dynamically get the content from the URL - in this case,
taniarascia- we'll use