Javascript React.js如何将阵列发送到React路由器

我有这样一个数组：

const types = [
        {
            name: 'Catalog A',
            slug: 'catalog-a'
        },
        {
            name: 'Catalog B',
            slug: 'catalog-b'
        },
        {
            name: 'Catalog C',
            slug: 'catalog-c'
        },
        {
            name: 'Catalog D',
            slug: 'catalog-d'
        },
    ]

此数组被映射并制作成按钮或链接，用于响应路由器。。。链接可以工作，但我的问题不是，我想将这些数组传递给与上述组件没有连接的组件

以下是映射按钮：

{types.map(type => (
                        <ButtonToggle
                        key={type}
                        active={active === type}
                        onClick={() => setActive(type)} 
                        show={parseFloat(show)}
                        >
                        <Link to={type.slug} >
                            {type.name}
                            <p>
                                Unpublished
                            </p>
                        </Link>

                        </ButtonToggle>
                    ))}

{types.map（type=>(
setActive（类型）}
show={parseFloat（show）}
>
{type.name}

未出版

))}

以下是我对绘制路线图的想法：

        {types.map(type => (
                        <Route 
                        path={type.slug}
                        >
                          <h1>{type.name}</h1>
                        </Route>
        ))}

{types.map（type=>(
{type.name}
))}

但是现在类型数组必须发送到上面的代码/组件。。。 我已经完成了对数组的处理，我只是为它创建了一个单独的文件，但活动状态尚未完成

active={active==type}

您可以这样尝试：

然后在您的下一个位置（

type.slug

我想），您应该有如下访问权限：

this.props.location.state

因此我将此

更改为

@MuhZulzidan它解决了您的问题吗？上的状态未解决