Using Routes and Links in ReactJS
A key function of all websites is to have multiple pages so that the user can do something and interact with the website. For the 2nd project that I made for Flatiron coding Bootcamp, I used React to develop a front-end website. Once you understand the syntax of writing in JSX, React actually becomes very simple to use. One of the best things about React is how many useful tools and hooks there are. I will talk about one, in particular, React Router. React Router is what allows your single page React web app to function like it has multiple pages.
The first step to using React Router is that you must install it. This can be done simply from the public npm registry with npm or yarn. After that, you must import ReactDOM from react-dom and BrowserRouter from react-router-dom. You do this at the highest level of your app, where it is actually rendered. Then, you wrap the app in BrowserRouter tags like shown below. This will now allow you to use all of the React Router functionality in your app.
Next, in the container that holds your app, which for me is App, we need to import Switch and Route from react-router-dom. The Switch tag looks through its children routes and renders the first one that matches the current URL. We want to wrap everything that will be shown on seperate pages in Switch tags. Anything like nagivation and headers should not be wrapped as these will need to be shown regardless of the page a user is on. In the Switch tags we will create our routes using the Route tag. The Route tag is used by using the path attribute to assign a URL parameter for the page you want the user to be transported to. another attribute, exact, is used to specify that for a user to land on that page the URL needs to be exact, matching that parameter. This would prevent a user from getting stopped at say /dogs when they want to go to /dogs/1. Alternatively, you can also place your home route at the bottom of the Switch tag to avoid running into this issue. Once you have your routes setup, just place any components you want to be rendered from that path in the Route tags.
With all this set up we can now start adding links. They are very simple to use. You import Link or NavLink from react-router-dom and set them up like you would a route. However, instead of using the path attribute, we use to. The only difference between Link and NavLink is that the latter allows you to do some stylistic stuff like highlight which link is currently clicked or active. Here is an example in my app.
To create a unique route for an individual page we will need a couple of tools. First we begin with the route path. In my app, each character element takes the user to a detailed page. As seen above, this is done by interpolating a path with the unique parameter at the end, in my case, id. I then added this link to each character element that is rendered with the to attribute interpolated with the id of each character.
As you can see using Routes and Links is quite simple. React Router offers a lot of functionality that is common to full-fledged websites. Using React Router made me think a lot about how to place my components and how I want everything to look on every page a user visits. A big thing I learned from this project was how to think in React. Specifically, designing a web app from scratch (using create react app). To prepare for this, I drew out a layout of how I want the page to look and what functionality it will have. Then I drew out my component hierarchy. As a still newbie developer, my component hierarchy went through several changes throughout making my app. It taught me how important organization is and how information needs to flow. I really enjoyed creating this web app and learning React! You can checkout my full project here: https://github.com/Zio-4/rick-and-morty-reservoir
