Reactjs 如何从react router Switch语句将道具传递到组件

我有一个简单的数组，其中包含可能的路由，然后将它们映射到

react dom router

组件中，以显示用户所在的正确路由

我的问题是： 如何将道具从route对象传递到

中使用的组件？这里讨论的关键是

/faq

路线中的

someKey

道具

route.js

import Home from "../components/home/Home";
import FaqPage from "../components/faq/FaqPage";

export default [
    {
        path: "/",
        exact: true,
        component: Home
    },
    {
        path: "/faq",
        component: FaqPage,
        someKey: "Test"
    }
];

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";

// Data
import routes from "../shared/routes";

class Body extends Component {
    render() {
        return (
            <div className="main-body">
                <Switch>
                    {routes.map((route, i) => {
                        // HOW DO I PASS THE 'someKey' PROP HERE?
                        return <Route key={i} {...route} />;
                    })}
                </Switch>
            </div>
        );
    }
}

export default Body;

Body.js

import Home from "../components/home/Home";
import FaqPage from "../components/faq/FaqPage";

export default [
    {
        path: "/",
        exact: true,
        component: Home
    },
    {
        path: "/faq",
        component: FaqPage,
        someKey: "Test"
    }
];

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";

// Data
import routes from "../shared/routes";

class Body extends Component {
    render() {
        return (
            <div className="main-body">
                <Switch>
                    {routes.map((route, i) => {
                        // HOW DO I PASS THE 'someKey' PROP HERE?
                        return <Route key={i} {...route} />;
                    })}
                </Switch>
            </div>
        );
    }
}

export default Body;

import React，{Component}来自“React”；
从“react router dom”导入{Switch，Route}；
//资料
从“./共享/路由”导入路由；
类主体扩展组件{
render（）{
返回(
{routes.map（（route，i）=>{
//我如何在这里传递“someKey”道具？
返回；
})}
);
}
}
导出默认体；

我尝试了几种不同的建议方式，但无法访问

FaqPage

组件中的道具。在该组件中，我尝试将prop与类似于

this.props.someKey的语句一起使用，但运气不佳。我看到的每个示例都使用
中的硬编码组件，但我使用的是一个变量



你知道我应该怎么做才能做到这一点吗？
你可以把这个组件包装到
渲染
函数中

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";

// Data
import routes from "../shared/routes";

class Body extends Component {
    render() {
        return (
            <div className="main-body">
                <Switch>
                    {routes.map(({component: Cmp, ...route}, i) => {
                        // HOW DO I PASS THE 'someKey' PROP HERE?
                        return (<Route
                                 key={i}
                                 {...route}
                                 render={props => <Cmp {...props} someKey="someValue" />} 
                               />);
                    })}
                </Switch>
            </div>
        );
    }
}

export default Body;

import React，{Component}来自“React”；
从“react router dom”导入{Switch，Route}；
//资料
从“./共享/路由”导入路由；
类主体扩展组件{
render（）{
返回(
{routes.map（{component:Cmp，…route}，i）=>{
//我如何在这里传递“someKey”道具？
返回（}
/>);
})}
);
}
}
导出默认体；
尝试将渲染功能添加到Body.js中的路由组件中，并访问该组件-

class Body extends Component {
    render() {
        return (
            <div className="main-body">
                <Switch>
                    {routes.map(({component: ComponentDetails, ...route}, i) => {
                        // HOW DO I PASS THE 'someKey' PROP HERE?
                        return (
                               <Route 
                                exact path='/'
                                key={i} 
                                {...route}
                                render={(props)=>
                                 <ComponentDetails {...props}
                                   someKey="TEST"  />)
                </Switch>
            </div>
        );
    }
}

export default Body;

类主体扩展组件{
render（）{
返回(
{routes.map（{component:ComponentDetails，…route}，i）=>{
//我如何在这里传递“someKey”道具？
返回(
)
);
}
}
导出默认体；
我没有直接访问组件的权限。组件是在route对象中定义的。因此在这种情况下，
render={（）=>}
不是一件事。这就是我被卡住的地方：（啊，我明白了……我有一个类似的问题，但组件没有在route对象中定义。我的修复方法是
}
。这允许我获取参数。也许可以尝试访问子组件中的this.props.route？以上答案就是在这种情况下有效的解决方案。ES6万岁！：）也感谢您的回答。非常感谢！