How can i create a dynamic page using parameter in react + Json

Question

How can i create a dynamic page using parameter in react + Json

in my code below i was able to map the json data and i need to create a dynamic url that create the /download page with the json details of the artist when i click on "GET MP3" button.

example: When i click GET MP3 a new tab will open with a url like this https:// mysite.com/ then on the download page i can get all the details from the {data.id}.

Please any idea on how to go around it?

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import "../customcss/style.css";
import data from  "../artist/toptrending5.json";






const newdata = data.map((item) => {

    const searchDownloadData = `download?id=${item.id}&artist=${item.artist}&title=${item.title}&genre=${item.genre}&urldownload=${item.urldownload}`
    return (
        <>
                                          
<div id="playerbackground" key= {data.id} style={{marginTop:  '10px'}}>
      <div className="row" align="center">
           <div className="col">
               <img id="Playericon" src={ Playericon } />

            </div>

          <div className="col ">
                            
            <button id="music-play" type="button" className="btn btn-outline-warning"><b>Play</b></button>
           </div>

              <div className="col-5 " align="center">
                       <h6 id="music-title"><b> { data.artist} - { data.title }</b></h6>
              </div>

        <div  className="col player-col-sm-2" align="center">
                           
        <Link to={searchDownloadData}  rel=" noopener noreferrer" id="music-download" className="btn btn-outline-primary"><b> MP3 </b></Link>
             </div>
                            
             </div> 
                          
              </div>

          
                  </>
                  )
                }
              )

export default class Top5 extends Component {
  
        render() {
    return (
      <>

<h2 id="trendtop5" className="trendtop5">Top 10 Trending Bongo Music</h2>
   
      <div id="" className="container"> {newdata} </div>
      <div className="container" style={{marginTop: '10px', paddingRight: '10px' }} >
      <button  className="btn btn-outline-primary"  ><NavLink exact to="/artist">Explore More</NavLink></button>
      </div>
      <br />
  
      </>

   );
  }
}

Below is my router

<BrowserRouter>
  
    <div id="wrapper">
 <header id="header">
    <div className="container">

      <div id="logo" className="pull-left">
          <img id="logo" src={ logo } />
        <h1 id="h1home"><a href="/"><strong> Music</strong></a></h1>
        
      </div>
        
      <nav id="menu-button-nav">


        <ul id="nav" className="nav-menu">
           
            <li className="btn btn-warning"><NavLink exact to="/">Home</NavLink></li>
            <li className="btn btn-warning"><NavLink to="/justin">Just In</NavLink></li>
            <li className="btn btn-warning"><NavLink to="/artist">Artists</NavLink></li>
            <li className="btn btn-warning"><NavLink to="/about">About</NavLink></li>
                 
        </ul>
        
      </nav>
      </div>
      
       </header>
</div>
 
     <div id="content" className="container" >

       
            <Route exact path="/" component={Home}/>
            <Route path="/justin" component={Justin}/>
            <Route path="/artist" component={Artists}/>
            <Route path="/about" component={About}/>
            <Route path="/download" component={DownloadArtist}></Route></Route>
         </div>

     
   
       </BrowserRouter>

Below is my Json data that hold the artist details

[
    {
        "id":1,
        "artist": "Artist 1" ,
        "title": "tata",
        "genre": "rock",
        "urldownload" : "https://drive.google.com/uc?export=download&id=1-"
    },
{
        "id":2,
        "artist": "Artist 1" ,
        "title": "tata",
        "genre": "rock",
        "urldownload" : "https://drive.google.com/uc?export=download&id=1-"
    },
{
        "id":3,
        "artist": "Artist 1" ,
        "title": "tata",
        "genre": "rock",
        "urldownload" : "https://drive.google.com/uc?export=download&id=1-"
    },
{
        "id":4,
        "artist": "Artist 1" ,
        "title": "tata",
        "genre": "rock",
        "urldownload" : "https://drive.google.com/uc?export=download&id=1-"
    }

]

Download Page

class DownloadArtist extends Component {

  render() {
const url = new URL(window.location.href);
const id = JSON.parse(url.searchParams.get("id"));
const artist = url.searchParams.get("artist");
const title = url.searchParams.get("title");
const genre = url.searchParams.get("genre");
const urldownload = url.searchParams.get("urldownload");


console.log(url)


    return (

    <>
             <section>
                <h1 id="artistComingSoon" className="center"> ADVERT!!!</h1>
              </section>


              <section>
              <div className="container">
                          <p> <strong>User ID: </strong>{id} </p>
                          <p> <strong>Artist Name: </strong>{artist}</p> 
                          <p> <strong>Title: </strong>{title} </p>
                          <p> <strong>Genre: </strong>{genre}</p>
                          <p> <strong>Download Link: </strong>{urldownload}</p>
                </div>
              </section>

       <section>
        <h1 id="artistComingSoon" className="center"> ADVERT!!!</h1>
      </section>
      </>
    );
  }
}
 
export default DownloadArtist;

Updated Solved

Answer 1

Your React app, wich is calling the download page, can pass parameter with the url. Your download page then can read those.

You can specify parameter with an "?"in your url. If you want to, you can send multiple parameter as well.

const url = `https://example.com/download/?id=${data.id}`

In your download page you can read those parameter with the URL class.

const url = new URL(window.location.href);
const id = JSON.parse(url.searchParams.get("id"));

With your example it would be something like this.

import React, { Component } from "react";
import {
    Route,
    NavLink,
    HashRouter
} from "react-router-dom";
import "../customcss/style.css";
import data from "../artist/toptrending5.json";

const newdata = data.map((item) => {
    const url = `/download/?id=${item.id}`;
    return (
        <>
            <div id="playerbackground" key={item.id} style={{ marginTop: '10px' }}>
                <div className="row" align="center">
                    <div className="col">
                        <img id="Playericon" src={Playericon} />
                    </div>
                    <div className="col ">
                        <button id="music-play" type="button" className="btn btn-outline-warning"><b>Play</b></button>
                    </div>
                    <div className="col-5 " align="center">
                        <h6 id="music-title"><b> {item.artist} - {item.title}</b></h6>
                    </div>
                    <div className="col player-col-sm-2" align="center">
                        <Link to={url} rel=" noopener noreferrer" id="music-download" className="btn btn-outline-primary"><b> MP3 </b></Link>
                    </div>
                </div>
            </div>
        </>
    )
}
)

export default class Top5 extends Component {
    render() {
        return (
            <>
                <h2 id="trendtop5" className="trendtop5">Top 10 Trending Bongo Music</h2>
                <div id="" className="container"> {newdata} </div>
                <div className="container" style={{ marginTop: '10px', paddingRight: '10px' }} >
                    <button className="btn btn-outline-primary"  ><NavLink exact to="/artist">Explore More</NavLink></button>
                </div>
                <br />
            </>
        );
    }
}

Answer 2

To handling URL routes in react, we are already use React Router

React Router allow us to manage routes and handling url with dynamic behavior, so that, what we need to do is:

1. Build route
2. Build url which its follow this route

For Example:

<Route path={`download/:type`}>
          <myComponent />
        </Route>

================

<li>
            <Link to=`/download/mp3`>Download MP3</Link>
          </li><li>
            <Link to=`/download/video`>Download Video</Link>
          </li>

If you do this, you will send url params and you can fetch it easy by this:

const {type} = useParams();