如何动态显示消息反应路由器dom

Question

当前正在开发一个显示电影集的api。。。我希望它能正常工作，这样当我点击标题时，它会将我重定向到另一个以标题名称为标题的页面。。我已经在我的代码上设置了状态，但当我点击链接或标题时，它成功重定向，但没有显示标题，就好像状态在重定向时被破坏了，给了我一个错误"；标题未定义"；当我重定向。。这是我处理链接的路线

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文件

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;

和我的详细信息文件

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

Answer 1

它不会再向您显示标题了，因为您正试图在另一个文件中显示标题(在该文件中，您有标题和其他内容的链接(，一旦您被引导到标题页面，现在标题页面的内容就会显示给您。不是您当前所在页面的内容(其中包含Details.js文件(