J'ai ces composants. Je veux tourner chaque entrée en une URL dynamique. Par exemple, lors de l'accès dans le navigateur, Les autres choses de l'application fonctionnent bien. Je veux juste résoudre ce problème de mise en œuvre des itinéraires dynamiques. P> Les données sont extraites à partir d'un fichier JSON P> db.json fichier strong> p> XXX PRE> http: // localhost: 3000 / maisons / 1 code> Je veux apparaître la maison 1. import React, { Component } from 'react';
class House extends Component {
constructor(props) {
super(props)
this.state = {
houseId: ""
}
}
componentDidMount() {
this.setState({
houseId: this.props.match.params.id
})
}
render() {
return (
<div>
<h3>{this.props.house.name}</h3>
<ul>
{this.props.house.photos.map((photo, index) => {
return (
<li><img src={`/images/${photo}`} /></li>
)
})
}
</ul>
</div>
)
}
}
export default House;
3 Réponses :
transmettez les données JSON sur import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import App from './App'
import Intro from './Intro'
import Houses from './Houses'
import House from './House'
import HouseInfo from './HouseInfo'
export default props => (
<Router>
<Route exact path='/' render={() => <App />} >
<Route exact path='/intro' render={() => <Intro />} />
<Route exact path='/houses' render={() => <Houses />} />
<Route exact path='/houses/:houseId' render={(props) => <HouseInfo {...props} />} />
</Route>
</Router>
)
Cela n'a pas fonctionné. Il y a un message d'erreur: TypeError: Impossible de lire les «paramètres» de la propriété non définie sur cette ligne de code: const housed = ceci.match.params.houseId;
Cela ne fonctionnera pas car vous utilisez le composant dans les maisons et dans vos itinéraires comme un composant standard seul.
Je vais ajouter un exemple
J'attends ta réponse.
Laissez-nous Continuez cette discussion en chat .
Un extrait entier a raison, à l'exception de la chose, c'est que vous avez assorti à tort les paramètres «forts> parames strong>, Changez le code suivant dans la composante House
this.setState({
houseId: this.props.match.params.houseId
})
Je ne vois pas à quels accessoires vous passez à la composante de la maison, mais ma supposition n'est pas exactement envisagée. Essayez ceci:
this.setState({
houseId: this.props.match.params.houseId
})
Salut. Quel est le problème que vous obtenez? Toute trace? Une description du comportement? Quel est le composant maison ?
J'ai édité ma question. J'ai été oublié d'inclure la composante de la maison. Je l'ai inséré maintenant.
Passez les données de maisons sur
Pouvez-vous m'expliquer cela plus détaillé? Il suffit de le montrer dans le code?
@claudiobitar j'ai ajouté une réponse
Je vais essayer de mettre en œuvre votre solution si cela sera avec succès, je vais uppouver votre réponse.