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

For dynamic URLs, you may not want to go with absolute paths. Consider shifting to query parameters.

Change url to http://localhost:8000/api/p?id=product01. In routing, render ProductDetailContainer for url 'http://localhost:8000/api/p'.

function ProductDetailContainer() {
    const query = new URLSearchParams(useLocation().search); // useLocation in react-router

    return <ProductDetail id={query.get('id')} />;
}

function ProductDetail({id}) {
    return ({id}); // Render details based on the ID fetched.
}

Code above is not tested. Please adapt accordingly :)

Hope it helps.

Answer 2

Another way to approach this would be to add a <Link /> 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 <App /> 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 (
    <div>
      {contacts.map((contact) => (
        <div key={contact.id>>
          <img src={contact.image} alt="" className="img-fluid" />
          <h3>
            {" "}
            <Link
              to={{
                pathname: `/productdetails/${contact.id}`,
                contact: contact,
              }}
            >
              {contact.title}
            </Link>
          </h3>
        </div>
      ))}
    </div>
  );
};

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 (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/productdetails/:slug" component={ProductDetails} />
      </Switch>
    </div>
  );
}

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 (
    <div>
      <h1>Product Details Page</h1>;
    </div>
  );
}

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.