how to dynamically show messages react-router-dom

Question

currently working on an api to display set of movies...i want it working so that when i click on a title it redirects me to a different page with the name of the title as the heading..i have already set state on my code to do that but when i click on the link or title it redirects successfully but doesn't show the title it's as if the state got destroyed on redirecting giving me an error of "Title undefined" when i redirect.. This is my route for handling the link

import React,{useState} from "react"
import {Link,Redirect} from "react-router-dom"
import Detail from "./Details"
  function Latest(props){
     const [Name,SetName] = useState(null)
       function Click(title){
       SetName(title)
       }
    return (
     <div>
      <div className = "row">
       {props.popular.map(function(popular){
  return (
  <div className = "col-lg-3 col-md-4 col-sm-6" style = {{marginBottom:"2rem"}} onClick = {() => props.id(popular.id)}>
  <div className="card">
  <img src= {"https://image.tmdb.org/t/p/original" + popular.backdrop_path} className="card-img-top" alt={popular.title} />
  <div className="card-body">
    <h3 className = "card-title">{popular.title}</h3>
    <p className = "card-text">{popular.overview}</p>
    <Link to = "/Title"><button type = "button" onClick = {() => Click(popular.title)}>Submit</button></Link>
    <Detail detail = {Name}/>
  </div>
 </div>
 </div>
   )
     })}
    </div>
      </div>
    )
     }

    export default Latest

App.js file

import {BrowserRouter,Route} from "react-router-dom"
 import Home from "./Home"
 import Detail from "./Details"
   function App(popular) {
     return (
      <div>
     <BrowserRouter>
      <div>
    <Route path = "/" exact component = {Home}/>
     <Route path = "/Title" component = {Detail}/>
     </div>
     </BrowserRouter>
     </div>
       )
         }

       export default App;

and my Details file

      import Latest from "./LatestMovies"
           function Detail(props){
             return <h1>{props.detail}</h1>
  }

  export default Detail

Answer 1

It wont show you the title anymore because see you are trying to display title in a different file(where you are having your link to title and other stuff) and as soon as you are directed to Title page,now the content of Title page would be shown to you.Not the Content of the page that you are currently in(which has your Details.js file)