基于React类组件State动态创建react-router-dom路由的实现问题咨询

实现方案 #

适用react-router-dom v5版本（和你当前代码写法匹配） #

1. 类组件获取路径参数

v5版本官方提供withRouter高阶组件，包裹类组件后即可从props中拿到路由相关属性，包含路径参数，适用于你匹配/:cat路径的Recipes组件：

// Recipes.js 示例
import React from 'react'
import { withRouter } from 'react-router-dom'

class Recipes extends React.Component {
  componentDidMount() {
    // 此处即可获取路径中的cat参数
    const catId = this.props.match.params.cat
    // 可直接用该id请求对应分类的菜谱数据
  }
  render() {
    return <div>当前分类ID：{this.props.match.params.cat}</div>
  }
}

// 导出时用withRouter包裹组件
export default withRouter(Recipes)

2. 依赖State生成动态路由跳转链接

你可以直接在Categories组件中遍历state存储的分类列表，用每个分类的id拼接跳转路径即可：

// Categories.js 完整实现
import React from 'react'
import { Link } from 'react-router-dom'

class Categories extends React.Component {
    state = {
        categories: []
    }

    componentDidMount() {
        fetch('http://localhost:8000/api/categories/')
            .then(response => response.json())
            .then(data => {
                this.setState({categories: data});
            });
    }

    render() {
        return (
            <div className="category-list">
              {this.state.categories.map(item => (
                // 直接用分类id生成动态跳转路径
                <Link to={`/${item.id}`} key={item.id}>
                  {item.name}
                </Link>
              ))}
            </div>
        );
    }
}

export default Categories

适配react-router-dom v6版本参考 #

如果后续升级到v6版本，官方取消了withRouter，可以自行封装高阶组件给类组件传递路由参数：

// 公共高阶组件封装
import { useParams, useNavigate, useLocation } from 'react-router-dom'

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} router={{ location, navigate, params }} />;
  }
  return ComponentWithRouterProp;
}

// 类组件中使用
class Recipes extends React.Component {
  componentDidMount() {
    const catId = this.props.router.params.cat
  }
}

export default withRouter(Recipes)

对应App.js的路由写法调整为：

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Categories />} />
          <Route path="/:cat" element={<Recipes />} />
        </Routes>
      </Router>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Jostal