如何使用react-router-dom创建动态路由? [英] How to create dynamic routes with react-router-dom?

问题描述

我学会了反应并知道如何创建静态路由，但无法弄清楚动态路由.也许有人可以解释，我将不胜感激.假设有两个组件，一个组件用于渲染路线，另一个组件作为路线的模板.也许代码有问题，但希望您理解..

I learn react and know, how to create static routes, but can't figure out with dynamic ones. Maybe someone can explain, I'll be very grateful. Let there be two components, one for rendering routes, and another as a template of a route. Maybe something wrong in the code, but hope You understand..

以下是呈现路线的组件:

Here is the component to render routes:

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看起来像这样:

The requested JSON looks like this:

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

路线组成部分(也许应该有道具，但是如何以正确的方式做到这一点):

The route component (maybe there should be props, but how to do it in the right way):

import React, { Component } from 'react';

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

export default Hero;

我在浏览器中需要这样的东西，并且每个路线的网址都应通过其ID(heroes/1，heroes/2 ...)来区分:

I need something like this in browser, and every route url should be differentiaie by it's id (heroes/1, heroes/2 ...):

约翰·史密斯 碎片哈克 西尔维奥(Silvio)

John Smith Crag Hack Silvio

每个:

约翰·史密斯. 向导.

John Smith. Wizard.

等等...

非常感谢您的帮助！)

推荐答案

• 使用Link动态生成路由列表.
• 使用:表示网址参数，如果使用:id表示
• 使用作为道具传递给呈现的路由组件的match对象访问url参数. this.props.match.params.id
• Use Link to dynamically generate a list of routes.
• Use : to indicate url params, :id in the case
• Use the match object passed as props to the rendered route component to access the url params. 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>
    );
  }
}

这篇关于如何使用react-router-dom创建动态路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！