Ausgabe
Ich lerne Reagieren und weiß, wie man statische Routen erstellt, komme aber mit dynamischen nicht klar. Vielleicht kann es jemand erklären, ich wäre sehr dankbar. Lassen Sie es zwei Komponenten geben, eine zum Rendern von Routen und eine andere als Vorlage einer Route. Vielleicht stimmt etwas im Code nicht, aber ich hoffe, Sie verstehen es.
Hier ist die Komponente zum Rendern von Routen:
import React, { Component } from 'react';
import axios from 'axios';
import Hero from './Hero';
class Heroes extends Component {
constructor(props) {
super(props);
this.state = {
heroes: [],
loading: true,
error: false,
};
}
componentDidMount() {
axios.get('http://localhost:5555/heroes')
.then(res => {
const heroes = res.data;
this.setState({ heroes, loading: false });
})
.catch(err => { // log request error and prevent access to undefined state
this.setState({ loading: false, error: true });
console.error(err);
})
}
render() {
if (this.state.loading) {
return (
<div>
<p> Loading... </p>
</div>
)
}
if (this.state.error || !this.state.heroes) {
return (
<div>
<p> An error occured </p>
</div>
)
}
return (
<div>
<BrowserRouter>
//what should be here?
</BrowserRouter>
</div>
);
}
}
export default Heroes;
Das angeforderte JSON sieht folgendermaßen aus:
const heroes = [
{
"id": 0,
"name": "John Smith",
"speciality": "Wizard"
},
{
"id": 1,
"name": "Crag Hack",
"speciality": "Viking"
},
{
"id": 2,
"name": "Silvio",
"speciality": "Warrior"
}
];
Die Routenkomponente (vielleicht sollte es Requisiten geben, aber wie man es richtig macht):
import React, { Component } from 'react';
class Hero extends Component {
render() {
return (
<div>
//what should be here?
</div>
);
}
}
export default Hero;
Ich brauche so etwas im Browser, und jede Routen-URL sollte sich durch ihre ID unterscheiden (heroes/1, heroes/2 …):
John Smith Crag Hack Silvio
Jeder von ihnen:
John Smith. Magier.
usw…
Vielen Dank für jede Hilfe!)
Lösung
- Wird verwendet
Link
, um dynamisch eine Liste von Routen zu generieren. - Verwenden Sie
:
, um URL-Parameter anzugeben,:id
in dem Fall - Verwenden Sie das Match-Objekt, das als Requisiten an die gerenderte Routenkomponente übergeben wird, um auf die URL-Parameter zuzugreifen.
this.props.match.params.id
<BrowserRouter>
/* Links */
{heroes.map(hero => (<Link to={'heroes/' + hero.id} />)}
/* Component */
<Route path="heroes/:id" component={Hero} />
</BrowserRouter>
class Hero extends Component {
render() {
return (
<div>
{this.props.match.params.id}
</div>
);
}
}
Beantwortet von – Avin Kavish
Antwort geprüft von – Clifford M. (FixError Volunteer)