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

Question

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

这是渲染路由的组件：

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"
  }
];

路线组件（也许应该有道具，但如何以正确的方式做到这一点）：

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 ...) 来区分：

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

他们每个人：

约翰·史密斯。巫师。

等等...

非常感谢您的帮助！）

Answer 1

更新一下，使其适用于 React Router v6：

React Router v6 对通用语法进行了一些更改：

Before:   <Route path="heroes/:id" component={Hero} />

Now:      <Route path="heroes/:id" element={<Hero />} />

您无法this.props.match再像这样访问参数：

Before:   this.props.match.params.id

Now:      import {useParams} from "react-router-dom";
          const {id} = useParams();

您现在可以将 id 用作任何其他变量。

Answer 2

• 使用Link动态生成路由的列表。
• 使用:指示网址参数，:id在案件
• 使用作为道具传递给渲染的路由组件的匹配对象来访问 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>
    );
  }
}

Answer 3

为此，您只需在应该是动态的 url 部分之前添加一个冒号即可。例子：

<BrowserRouter>
  {/* Dynamic Component */}
  <Route path="heroes/:id" component={Hero} />
</BrowserRouter>

您还可以使用useParamshook fromreact-router-dom来获取动态值，以便在动态创建的页面中使用。例子：

import { useParams } from "react-router-dom";

const Hero = () => {

    const params = useParams();
    // params.id => dynamic value defined as id in route
    // e.g '/heroes/1234' -> params.id equals 1234

    return (...)
}