[FIXED] Wie erstelle ich dynamische Routen mit React-Router-Dom?

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, :idin 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)