Как передать реквизиты в компонент из оператора Switch-router

Question

У меня есть простой массив с возможными маршрутами в нем, а затем map их внутри компонента react-dom-router <Switch>, чтобы показать правильный маршрут, на котором находится пользователь.

Вопрос Ihave is: Как передать реквизит из объекта маршрута компоненту, используемому в <Switch>?Ключевым вопросом здесь является опора someKey на маршруте /faq.

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

Body.js

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;

Я попробовал несколько предложенных способов, но мне не удалось получить доступ к подпорке в компоненте FaqPage.Внутри этого компонента я безуспешно пытался использовать опору с утверждением типа this.props.someKey.Каждый образец, который я вижу, использует жестко закодированный компонент внутри <Route />, но я использую переменную.

https://github.com/ReactTraining/react-router/issues/4105#issuecomment-291834881 https://github.com/ReactTraining/react-router/issues/4627#issuecomment-332972317

Любая идея, что я должен делатьчтобы это произошло?

Answer 1

Попробуйте добавить функцию рендеринга в компонент Route в 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;

Answer 2

Вы можете заключить компонент в функцию render.

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;