如何使用 react-router-dom 创建动态路由？

Posted 2023-02-22

【中文标题】如何使用 react-router-dom 创建动态路由？

【英文标题】：How to create dynamic routes with react-router-dom?

【发布时间】：2019-11-25 06:51:31

【问题描述】：

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

这里是渲染路由的组件：

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 ...）：

约翰·史密斯 峭壁黑客 西尔维奥

他们每个人：

约翰·史密斯。 向导。

等等……

非常感谢您的帮助！）

【参考方案1】：

使用Link 动态生成路由列表。 用:表示url参数，本例用:id 使用作为 props 传递给渲染路由组件的匹配对象来访问 url 参数。 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>
    );
  

【讨论】：

有什么方法可以将动态 id 传递给路由而不在 url 中提及它。比如 Route 将是 并且我们可以在 Hero 中传递和获取 id 吗？

@S0haibNasir 是的，你可以使用