IT技术 - 如何使用 react-router-dom 创建动态路由？ - 吾爱随笔录

我学习react并知道如何创建静态路由，但无法弄清楚动态路由。也许有人可以解释一下，我将不胜感激。让有两个组件，一个用于渲染路由，另一个作为路由的模板。也许代码有问题，但希望你明白..

这是渲染路由的组件：

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;

请求的 JSON 如下所示：

const heroes = [
  {
    "id": 0,
    "name": "John Smith",
    "speciality": "Wizard"
  },
  {
    "id": 1,
    "name": "Crag Hack",
    "speciality": "Viking"
  },
  {
    "id": 2,
    "name": "Silvio",
    "speciality": "Warrior"
  }
];

路线组件（也许应该有props，但如何以正确的方式去做）：

import React, { Component } from 'react';

class Hero extends Component {
  render() {
    return (
      <div>
        //what should be here?
      </div>
    );
  }
}

export default Hero;

我在浏览器中需要这样的东西，每个路由 url 都应该通过它的 id (heroes/1, heros/2 ...) 来区分：

约翰史密斯峭壁哈克西尔维奥

他们每个人：

约翰·史密斯。巫师。

等等...

非常感谢您的帮助！）