Блог

в настоящее время работаю над 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
 

Он больше не будет показывать вам заголовок, потому что вы видите, что вы пытаетесь отобразить заголовок в другом файле (где у вас есть ссылка на заголовок и другие материалы), и как только вы перейдете на страницу заголовка, теперь вам будет показано содержимое страницы заголовка.Не содержимое страницы, на которой вы находитесь в данный момент (на которой есть ваш Details.js файл)