title: React Route path not generating desired component
body: <p>Working on getting a product details view page displaying the specifications of a product but the view for that component does not show. It reads the right path and product ID as it displays is on the URL but the page itself is blank.</p>
  <p>My belief is my mistake is in PageLayout section but i've reworked several times for multiple days now and no luck.</p>
  <p>APP.js:</p>
  <pre><code>import React, { Fragment, useState, useEffect } from &quot;react&quot;;
  import { BrowserRouter as Router, Route, Switch } from &quot;react-router-dom&quot;;
  
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  
  import NavbarMain from &quot;./components/pagelayout/Navbar/Navbar&quot;;
  import Footer from &quot;./components/pagelayout/Footer/Footer&quot;;
  import HomePage from &quot;./components/landingpage/page/HomePage&quot;;
  import setAuthToken from &quot;./utilities/setAuthToken&quot;;
  import Login from &quot;./components/auth/Login&quot;;
  import Register from &quot;./components/auth/Register&quot;;
  import AccountPage from &quot;./components/pers_account/AccountPage&quot;;
  import OurStory from &quot;./components/story/OurStory&quot;;
  import SustainableCode from &quot;./components/sustcode/SustainableCode&quot;;
  import AdminRoute from &quot;./components/routing/AdminRoute&quot;;
  import PrivateRoute from &quot;./components/routing/PrivateRoute&quot;;
  import ProductForm from &quot;./components/forms/ProductForm/ProductForm&quot;;
  import ProductDisplay from &quot;./components/productdisplay/ProductDisplay&quot;;
  import PageLayout from &quot;./components/productdetails/layout/PageLayout&quot;;
  import Alert from &quot;./components/pagelayout/Alert/Alert&quot;;
  
  //Redux
  import { Provider } from &quot;react-redux&quot;;
  import store from &quot;./store&quot;;
  import { loadUser } from &quot;./actions/auth&quot;;
  
  if (localStorage.token) {
      setAuthToken(localStorage.token);
  }
  
  
  const App = () =&gt; {
      useEffect(() =&gt; {
          store.dispatch(loadUser());
      }, []);
      return ( &lt; Provider store = { store } &gt;
          &lt;Router &gt;
          &lt;Fragment &gt;
          &lt;NavbarMain / &gt;
          &lt;Route exact path = &quot;/&quot; component = { HomePage }/&gt; 
          &lt;br/&gt;
          &lt;section className = &quot;container&quot;&gt;
          &lt;Alert/&gt;
          &lt;Switch&gt;
              &lt;Route exact path = &quot;/products/items&quot; component = {ProductDisplay}/&gt;
              &lt;Route exact path = &quot;/products/items/:id&quot; component = {PageLayout} /&gt;
              &lt;Route exact path = &quot;/account/login&quot;component = { Login }/&gt; 
              &lt;Route exact path = &quot;/account/register&quot;component = { Register }/&gt; 
              &lt;PrivateRoute exact path=&quot;/account&quot; component = {AccountPage}/&gt;
              &lt;AdminRoute exact path = &quot;/products/add/sustdrop&quot; component = {ProductForm}/&gt;
              &lt;Route exact path = &quot;/sustdrop/story&quot; component = { OurStory }/&gt;
              &lt;Route exact path = &quot;/sustdrop/sustainablecode&quot; component = {SustainableCode}/&gt;
          &lt;/Switch&gt; 
          &lt;/section&gt; 
          &lt;Footer/&gt;
          &lt;/Fragment&gt;{&quot; &quot;} 
          &lt;/Router &gt;
          &lt;/Provider&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>Redux Actions:</p>
  <pre><code>import {
      GET_PRODUCTS,
      GET_PRODUCT,
      PRODUCT_ERROR,
      CLEAR_SELECTED_PRODUCT,
      ADD_PRODUCT_SUCCESS,
      DONE_LOADING_PRODUCTS,
      DONE_DELETING_PRODUCTS,
  } from &quot;./types&quot;;
  
  import axios from &quot;axios&quot;;
  import { setAlert } from &quot;./alert&quot;;
  
  // Get all products
  export const getProducts = () =&gt; async(dispatch) =&gt; {
      try {
          const res = await axios.get(&quot;/api/products&quot;);
  
          dispatch({
              type: GET_PRODUCTS,
              payload: res.data,
          });
      } catch (err) {
          dispatch({
              type: PRODUCT_ERROR,
              payload: { msg: err.response.statusText, status: err.response.status },
          });
      }
  };
  
  // change 'loading' to true
  export const doneLoading = () =&gt; async(dispatch) =&gt; {
      dispatch({
          type: DONE_LOADING_PRODUCTS,
      });
  };
  
  // Get a specific product by ID
  export const getProduct = (id) =&gt; async(dispatch) =&gt; {
      try {
          const res = await axios.get(`/api/products/${id}`);
  
          dispatch({
              type: GET_PRODUCT,
              payload: res.data,
          });
      } catch (err) {
          dispatch({
              type: PRODUCT_ERROR,
              payload: {
                  status: err.response.status,
                  statusText: err.response.statusText,
              },
          });
      }
  };
  
  // clears selected products
  export const clearSelectedProduct = () =&gt; (dispatch) =&gt; {
      dispatch({
          type: CLEAR_SELECTED_PRODUCT,
      });
  };
  
  // Add a product
  export const addProduct = ({ formData }) =&gt; async(dispatch) =&gt; {
      const config = {
          headers: {
              &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
      };
  
      try {
          const res = await axios.post(&quot;/api/products&quot;, formData, config);
  
          dispatch({
              type: ADD_PRODUCT_SUCCESS,
          });
  
          dispatch(setAlert(res.data.msg, &quot;success&quot;));
      } catch (err) {
          const errors = err.response.data.errors;
  
          if (errors) {
              errors.forEach((error) =&gt; dispatch(setAlert(error.msg, &quot;danger&quot;)));
          }
      }
  };
  
  // Delete selected product
  export const deleteProducts = (products_id) =&gt; async(dispatch) =&gt; {
      try {
          const res = await axios.delete(`/api/products/${products_id}`);
  
          dispatch({
              type: CLEAR_SELECTED_PRODUCT,
          });
  
          dispatch({
              type: DONE_DELETING_PRODUCTS,
          });
  
          dispatch(setAlert(res.data.msg, &quot;success&quot;));
      } catch (err) {
          dispatch({
              type: PRODUCT_ERROR,
              payload: { msg: err.response.statusText, status: err.response.status },
          });
      }
  };
  </code></pre>
  <p>Redux Reducers:</p>
  <pre><code>import {
      GET_PRODUCTS,
      GET_PRODUCT,
      PRODUCT_ERROR,
      CLEAR_SELECTED_PRODUCT,
      ADD_PRODUCT_SUCCESS,
      DONE_LOADING_PRODUCTS,
      DONE_DELETING_PRODUCTS,
  } from &quot;../actions/types&quot;;
  
  const initialState = {
      selectedProduct: null, // latest product you clicked
      products: [], // all the products
      loadingProducts: true,
      error: null,
      loadingSelectedProduct: true,
      isAddingProductsSuccessful: false,
      deletingProducts: false,
  };
  
  export default function(state = initialState, action) {
      const { type, payload } = action;
  
      switch (type) {
          case GET_PRODUCTS:
              return {
                  ...state,
                  products: payload,
                  loadingProducts: false,
                  isAddingProductsSuccessful: false,
                  deletingProducts: false,
              };
          case DONE_LOADING_PRODUCTS:
              return {
                  ...state,
                  loadingProducts: true,
              };
          case GET_PRODUCT:
              return {
                  ...state,
                  selectedProduct: payload,
                  loadingSelectedProduct: false,
              };
          case CLEAR_SELECTED_PRODUCT:
              return {
                  ...state,
                  selectedProduct: null,
                  loadingSelectedProduct: false,
              };
          case ADD_PRODUCT_SUCCESS:
              return {
                  ...state,
                  isAddingProductsSuccessful: true,
              };
          case PRODUCT_ERROR:
              return {
                  ...state,
                  error: payload,
              };
          case DONE_DELETING_PRODUCTS:
              return {
                  ...state,
                  deletingProducts: true,
              };
          default:
              return state;
      }
  }
  </code></pre>
  <p>Product Details Folder:</p>
  <p>Details.js</p>
  <pre><code>import React, { useState } from 'react';
  import { withRouter } from &quot;react-router-dom&quot;;
  
  // CSS \\
  import &quot;./ProductDetails.css&quot;;
  
  const ProductDetails = (props) =&gt; {
      const { _id, brand, name, description, retail_price} = props.selectedProduct;
  
      const { deleteProducts } = props;
  
      return (
          &lt;div className = &quot;details-wrapper&quot;&gt;
              &lt;div className = &quot;product-info&quot;&gt;
                  &lt;h1 className = &quot;product-info-brand&quot;&gt;{brand}&lt;/h1&gt;
                  &lt;p className = &quot;product-info-name&quot;&gt;{name}&lt;/p&gt;
                  &lt;p className = &quot;product-info-desc&quot;&gt;{description}&lt;/p&gt;
                  &lt;p className = &quot;product-info-price&quot;&gt; retail price: {retail_price}&lt;/p&gt;
              &lt;/div&gt;
              {
                  props.isAdmin ? (
                      &lt;&gt;
                          &lt;button className = &quot;productinfo-button btn btn-danger btn-block btn-sm&quot;
                          onClick = {() =&gt; deleteProducts(_id)}&gt;Delete Product&lt;/button&gt;
                      &lt;/&gt;
                  ) : null
              }
          &lt;/div&gt;
      );
  };
  
  export default withRouter(ProductDetails);
  </code></pre>
  <p>Product Images display for specs:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  // CSS \\
  import &quot;./Images.css&quot;;
  
  const Images = (props) =&gt; {
      const { images } = props;
  
      const [mainImage, setMainImage] = useState(images[0]);
  
      const changeMainImage = (image) =&gt; {
          setMainImage(image);
      };
  
      return ( 
          &lt;div className = &quot;image-wrapper&quot; &gt;
              &lt;div className = &quot;mainrow&quot; &gt;
                  &lt;img src = { mainImage } alt = &quot;mainproduct&quot; /&gt;
              &lt;/div&gt; 
          &lt;div className = &quot;alt-images&quot; &gt;
          &lt;div className = &quot;secondrow&quot; &gt; 
              {images.map((productImage, index) =&gt; ( 
                  &lt;div key = { index } className = &quot;alternativepics&quot; onClick = {() =&gt; changeMainImage(productImage) }&gt;
                      &lt;img src = { productImage } alt = &quot;small_alts&quot; / &gt;
                  &lt;/div&gt;
              ))
          }
          &lt;/div&gt; 
          &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default Images;
  </code></pre>
  <p>Most Important, page layout for details:</p>
  <p>layout.js</p>
  <pre><code>import React, { useEffect, Fragment } from &quot;react&quot;;
  import { connect } from &quot;react-redux&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { Redirect } from &quot;react-router-dom&quot;;
  import { getProducts, getProduct, clearSelectedProduct, deleteProducts } from &quot;../../../actions/product&quot;;
  import Loading from &quot;../../pagelayout/Loading/Loading&quot;;
  
  import ProductDetails from &quot;../details/ProductDetails&quot;;
  import Images from &quot;../images/Images&quot;;
  
  const PageLayout = ({
      getProduct, getProducts, clearSelectedProduct, deleteProducts, match : {
          params: { id },
      },
      product: { selectedProduct, products, deletingProducts, error },
      auth: { isAdmin },
  }) =&gt; {
      useEffect(() =&gt; {
          selectProduct(id);
          getProduct();
      }, []);
  
      const selectProduct = (id) =&gt; {
          clearSelectedProduct();
          getProduct(id);
      };
  
      if(deletingProducts){
          return &lt;Redirect to = { &quot;/&quot;}/&gt;;
      };
  
      return selectedProduct === null ? (
          error ? (
              &lt;div&gt;
                  &lt;p&gt;{error.msg}&lt;/p&gt;
              &lt;/div&gt;
          ) : (&lt;Loading/&gt; )
      ) : (
          &lt;Fragment&gt;
              &lt;Images images = { selectedProduct.images}/&gt;
              &lt;ProductDetails selectedProduct = {selectedProduct} isAdmin = {isAdmin} deleteProducts = {deleteProducts}/&gt;
          &lt;/Fragment&gt;
      );
  };
  
  const mapStateToProps = (state) =&gt; ({
      product: state.product,
      auth: state.auth,
  });
  
  PageLayout.propTypes= {
      getProduct: PropTypes.func,
      getProducts: PropTypes.func,
      clearSelectedProduct: PropTypes.func,
      deleteProducts: PropTypes.func,
      product: PropTypes.object.isRequired,
      auth: PropTypes.object.isRequired
  };
  
  export default connect(mapStateToProps, {
      getProduct, getProducts, clearSelectedProduct, deleteProducts
  })(PageLayout);
  </code></pre>