Send props to react router component from parent layout component

Question

I have created a layout component called Main which sends user prop to its children component using React.cloneElement(children, { user: 'First Name'}), but unable to pass that user prop to Route component.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Main.jsx";
import Home from "./Home.jsx";

const App = () => (
  <Router>
    <Main>
      <Route
        path="/"
        render={props => {
          return <Home {...props} />;
        }}
      />
    </Main>
  </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Main.jsx

import React from "react";

export default props => {
  return <div>{React.cloneElement(props.children, { user: "Username" })}</div>;
};

Home.jsx

import React from "react";

export default props => {
  const { user } = props;
  return <div>User - {user}</div>;
};

But unable to get user prop in Home component. If I do not use Route then it gets passed to Home.

When I do this, then Home receives user prop.

<Main>
   <Home />
</Main>

How can I get user prop and send it to component rendered by Route?

Codesandox link of the scenario - https://codesandbox.io/s/kmyrj0zr8o

Answer 1

Well, you have to wrap Route into own component. The idea is to catch props and pass it manually to Route's render.

Here is modified source: https://codesandbox.io/s/zx508v60yl

Wrapping Route (MyRoute.jsx)

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

export default class MyRoute extends React.Component {
    render() {
        var { Component, path, exact, passedProps } = this.props;
        return (
            <Route
                path={path}
                exact={exact}
                render={props => <Component {...props} {...passedProps} />}
            />
        );
    }
}

Modifying Main.jsx

import React from "react";

export default props => {
    return (
        <div>
            {React.cloneElement(props.children, {
                passedProps: {
                    user: "Username"
                }
            })}
        </div>
    );
};

Then changing Route to MyRoute in index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Main.jsx";
import Home from "./Home.jsx";
import MyRoute from "./MyRoute.jsx";

const App = () => (
    <Router>
        <Main>
            <MyRoute path="/" Component={Home} />
        </Main>
    </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);