how to render to a page whenever user click to a dynamic url ReactJS?

Question

what i am trying to solve is, how to render to a specific page whenever user click to dynamic url? for more specific, there is my \"product_list\" api data. in \"product_list\"

Answer 1

Another way to approach this would be to add a component in the map function of contacts and pass down the details as props. Also, you have to set up the Router component to render the page. Assuming as your root component, you have to wrap this component with BrowserRouter inside your index.js file. Here's a working sandbox.

//Contacts.js
import React from "react";
import { Link } from "react-router-dom";

const Contacts = ({ contacts }) => {
  return (
    

      {contacts.map((contact) => (
        
>
          
          

            {" "}
            
              {contact.title}
            
          
        
      ))}
    
  );
};

export default Contacts;

//App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import ProductDetails from "./ProductDetails";

function App() {
  return (
    

      
        
        
      
    
  );
}

export default App;

The Home component in the App.js would be the App.js in your question.

//ProductDetails.js
import React from "react";
import {  useLocation } from "react-router-dom";

function ProductDetails({ location }) {
  const { contact } = location;
  console.log(contact);
  let queryParams= useLocation();
  console.log(queryParams)
  return (
    

      
Product Details Page
;
    
  );
}

export default ProductDetails;

In the ProductDetails component, you can access queryParams and the props passed down from Contacts component with which you can make additional API requests to render data.