Product Page in Browser in Redux

In the last lesson we made a separate page for the product. Now we need to make it so that when we click on a button, our page appears in the browser.

First, let's attach the address where it will be displayed. Open the file App.jsx, where we write the routes and add another child route to children (don't forget to import ProductPage.jsx). Specify the path and the component that will be displayed:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

Now let's open ProductsList.jsx in the products folder and change the code for dispProducts a little. Now we have a separate page with full information about each product. This means that in the product list we will display only the product name and a shortened description text. We will also add a link in the form of a navigation element Link from the router library, when clicked, you can get to the product page. We will also add a div class product-excerpt to unstick the products. Now our code for dispProducts will be like this:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Import Link:

import { Link } from 'react-router-dom'

And let's add styles for the link-btn and product-excerpt classes to index.css:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

Finally, let's also make a working link in the left menu that leads to the product list page, so we can get to it from anywhere else. To do this, open our root.jsx and replace this line of code:

<a>Products</a>

To the next one:

<NavLink to="/products" end>
	Products
</NavLink>

Also, don't forget to import NavLink from the library for React router:

import { Outlet, NavLink } from 'react-router-dom'

Let's run our application. Now we can go to the information page about any product by clicking on the view button. Try adding a new product now and view information about it on a separate page by clicking on the view button. Also now, to return to the list of products, just click on 'Products' in the menu on the left. When on different pages, see how the URL changes in the browser address bar.

Open your students app. In the App.jsx file, create another child route for the student page.

In the StudentsList.jsx file, make the changes to the code for dispStudents as shown in the tutorial.

Make the 'Students' link in the left menu point to the student list page. Check that it works.

See how the value in the browser address bar will change depending on which page you are currently on.