如何将props从react-router Switch语句传递到组件

Question

I have a simple array with the possible routes in it, and then map them inside a react-dom-router <Switch> component to show the proper route that the user is on.

The question I have is: How do I pass a prop from the route object to the component being used within the <Switch> ? The key in question here is the someKey prop in the /faq route.

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;

I've tried a few different ways suggested but I've been unable to access the prop within the FaqPage component. Inside that component I tried to use the prop with a statement like this.props.someKey with no luck. Every sample I see uses a hardcoded component inside the <Route /> , but I'm using a variable.

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

Any idea what I should be doing to make this happen?

Answer 1

You could wrap component into render function.

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;

Answer 2

Try adding a render function into your Route Component in Body.js and access the component there-

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;