这是我的主页的一部分，分为以下几个部分： https://i.imgur.com/KWDt8h5.png
它工作正常，在我单击“ Miniatura”后，它出现在呈现Articolo.js组件（与Home.js非常相似）的URL http://localhost:3000/articolo/32（32只是文章的ID）上）
https://i.imgur.com/LRPWAMB.png
现在有2个问题： 1）Miniatura中的链接不再起作用。如果单击链接，URL会正确更改，但不会加载文章视图。 2）文章的背景图片消失了
App.js：
class App extends React.Component{
render(){
return(
<Router>
<MainHeader />
<section className="corpo-pagina">
<Switch>
<Route exact path="/cerca" component={ArticoliCercati}/>
<Route exact path="/articolo/:id" component={Articolo}/>
<Route exact path="/info" component={Info}/>
<Route exact path="/contatti" component={Contatti}/>
<Route exact path="/archivio" component={Archivio}/>
<Route exact path="/" component={Home}/>
</Switch>
</section>
<Aside />
<MainFooter />
</Router>
)
}
}export default App
Home.js：
class Home extends React.Component{
constructor(){
super()
this.state={
statoArticoli:[],
caricato:false
}
}
// quando l'elemento viene caricato effettua la chiamata asincrona per ricevere tutti gli articoli nel database
componentDidMount(){
$.ajax({
type:"GET",
url:"http://localhost/pseudogazzetta2/src/REST/Articoli/leggi.php",
dataType: "json",
success: function(risposta){
//se la chiamata ha avuto successo cambia lo stato
this.setState({
statoArticoli:risposta,
caricato:true
})
}.bind(this),
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
render(){
// caricamento condizionale: se il metodo componentDidMount contenente il metodo ajax è stato eseguito carica la schermata, se no una scritta di attesa
if(this.state.caricato){
return(
<React.Fragment>
<article id="anteprimaArticolo">
<div id="contenitore-anteprima">
<Link to={"/articolo/"+this.state.statoArticoli[0].id}>
<h1>{this.state.statoArticoli[0].titolo}</h1>
<img id='img-articolo-corrente' src={"./immagini/immaginiArticoli/"+this.state.statoArticoli[0].immagine} alt={this.state.statoArticoli[0].immagine} /><br />
</Link>
</div>
<footer>
<time dateTime={this.state.statoArticoli[0].data}>{this.state.statoArticoli[0].data}</time>
<small>{this.creaTags(this.state.statoArticoli[0].tags)}</small>
</footer>
<p>
{this.state.statoArticoli[0].testo.substring(0,40)+"..."}<a id='continua-leggere' href={"articolo.php?id="+this.state.statoArticoli[0].id}>continua a leggere</a>
</p><br />
</article>
<Archivio inizio="1" numero="6" titolo="I Più Recenti"/>
</React.Fragment>
)
}else{
return(<h1>Caricamento in corso...</h1>)
}
}
}export default Home
Articolo.js
``` lang-js
class Articolo extends React.Component{
constructor(props){
super(props)
this.state={
statoArticoli:[],
caricato:false,
id:props.match.params.id
}
}
// quando l'elemento viene caricato effettua la chiamata asincrona per ricevere tutti gli articoli nel database
componentDidMount(){
$.ajax({
type:"GET",
url:"http://localhost/pseudogazzetta2/src/REST/Articoli/leggi.php",
data:"cerca="+this.state.id+"&campo=id",
dataType: "json",
success: function(risposta){
//se la chiamata ha avuto successo cambia lo stato
this.setState({
statoArticoli:risposta,
caricato:true
})
}.bind(this),
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
render(){
// caricamento condizionale: se il metodo componentDidMount contenente il metodo ajax è stato eseguito carica la schermata, se no una scritta di attesa
if(this.state.caricato){
return(
<React.Fragment>
<article id="articoloCorrente">
<h1 id='titolo-articolo'>{this.state.statoArticoli[0].titolo}</h1>
<img id='img-articolo-corrente' src={"/immagini/immaginiArticoli/"+this.state.statoArticoli[0].immagine} alt={this.state.statoArticoli[0].immagine} /><br />
<footer>
<time id='data-articolo' dateTime={this.state.statoArticoli[0].data}>{this.state.statoArticoli[0].data}</time>
<small>{this.creaTags(this.state.statoArticoli[0].tags)}</small>
</footer>
<p id='testoArticolo'>{this.state.statoArticoli[0].testo}</p><br />
</article>
<Archivio inizio="1" numero="6" titolo="I Più Recenti"/>
</React.Fragment>
)
}else{
return(<h1>Caricamento in corso...</h1>)
}
}
}export default Articolo
Archivio.js：
class Archivio extends React.Component{
constructor(props){
super(props)
this.state={
statoArticoli:[],
caricato:false
}
}
// quando l'elemento viene caricato effettua la chiamata asincrona per ricevere tutti gli articoli nel database
componentDidMount(){
$.ajax({
type:"GET",
url:"http://localhost/pseudogazzetta2/src/REST/Articoli/leggi.php",
dataType: "json",
success: function(risposta){
// crea l'array contenente gli articoli recenti
const maxArticoli=this.props.numero
var articoliRec=risposta
//esegui un ciclo per rimuovere il primo valore dell'array fino al raggiungimento del valore richiesto
for(var i=0;i<this.props.inizio;i++){
articoliRec.shift()
}
//verifica se gli articoli (escludendo quello di anteprima) sono più o meno del massimo visualizzato in pagina. se sono di più accorcia l'array
if((articoliRec.length)>maxArticoli){
articoliRec.splice(maxArticoli)
}
//se la chiamata ha avuto successo cambia lo stato
this.setState({
statoArticoli:articoliRec,
caricato:true
})
}.bind(this),
error: function () {
alert("errore nella connessione al Database")
}
})
}
render(){
// caricamento condizionale: se il metodo componentDidMount contenente il metodo ajax è stato eseguito carica la schermata, se no una scritta di attesa
if(this.state.caricato){
return(
<section id="articoli-recenti-sezione">
<header><h1>{this.props.titolo}</h1></header>
{// sostituisce l'array di oggetti con un array di componenti
this.state.statoArticoli.map(elemento=>{
return (
<Miniatura titolo={elemento.titolo} immagine={"./immagini/immaginiArticoli/"+elemento.immagine} id={elemento.id} key={"k"+elemento.id}/>
)
})}
<Link to='/archivio'><footer>Mostra Altro</footer></Link>
</section>
)
}else{
return(<h1>Caricamento in corso...</h1>)
}
}
}
export default Archivio
Miniatura.js
class Miniatura extends React.Component{
render(){
return(
<Link to={"/articolo/"+this.props.id}>
<div className="miniatura-articolo">
<img src={this.props.immagine} />
<h1>{this.props.titolo}</h1>
</div>
</Link>
)
}
}
export default Miniatura
答案 0 :(得分：0)
您不在此处处理请求的路线：
<Switch>
<Route exact path="/cerca" component={ArticoliCercati}/>
<Route exact path="/info" component={Info}/>
<Route exact path="/contatti" component={Contatti}/>
<Route exact path="/archivio" component={Archivio}/>
<Route exact path="/" component={Home}/>
</Switch>
您应该再添加一个以渲染'/ articolo / 32`;
一个例子可能是：
<Switch>
<Route exact path="/cerca" component={ArticoliCercati}/>
<Route exact path="/info" component={Info}/>
<Route exact path="/contatti" component={Contatti}/>
<Route exact path="/archivio" component={Archivio}/>
<Route exact path="/articolo/:id" component={WhateverComponent}/>
<Route exact path="/" component={Home}/>
</Switch>
然后您应该在路线上处理该ID，以便提供正确的内容。