反应路由器 dom v6 未在 mapStateToProps 中填充 ownProps答案

【问题标题】：React router dom v6 not populating ownProps in mapStateToProps反应路由器 dom v6 未在 mapStateToProps 中填充 ownProps
【发布时间】：2021-01-18 11:04:02
【问题描述】：

我最近安装了 react-router-dom V6 的 beta 版本，因为我喜欢 Outlet 和基于对象的路由，因为它们让我的生活更轻松。但是，由于我使用的是React-Redux，所以遇到了mapStateToProps函数中无法获取URL参数的问题：

const mapStateToProps = (state, ownProps) => {
    return {
        campaign: selectCampaignById(state, ownProps.match.params.id),
    };
};

路由定义为：

const routes = useRoutes({
        path: 'admin',
        element: <DashboardLayout />,
        children: [
            { path: '/', element: <DashboardContainer /> },
            { path: 'campaign/edit/:id', element: <CampaignEdit /> },
            { path: 'campaign/create', element: <CampaignCreate /> },
            { path: 'campaign', element: <CampaignListView /> },
            ...
        ],
    });,

在上面的例子中，ownProps.match 对象是未定义的，而它与 react-router-dom V5 一起工作。我想强调路线和其他一切都在工作，除了我无法让ownProps.match 填充 url 参数。

任何人都可以为此提供解决方案。谢谢！

【问题讨论】：

标签： reactjs react-redux react-router-dom

【解决方案1】：

在这种情况下，您可以使用与mapStateToProps() 等效的useSelector()。

我没有您项目的完整源代码，但我会删除 mapStateToProps 声明，并且在您的组件中您可以执行以下操作：

const { id } = useParams()

const campaign = useSelector(state => state.campaigns[id]

不要忘记添加导入：

import { useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'

More info 关于useSelector()。

Useful answer关于useSelector()和mapStateToProps()的用法。

【讨论】：