Send props to react router component from parent layout component - reactjs

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);

Answer 2

When you need to pass props to the router component, you need to use the render prop to do that, but since React.cloneElement will actually just pass the props to the Route component, you can write a wrapper around Route, something like
const RouteWrapper = ({render, exact, strict, path, ...rest}) => {
return (
<Route
exact={exact}
strict={strict}
path={path}
render={(function(routerProps) => {
return render(...routerProps, ...rest)
})()}
/>
)
}
Which you can now use like
const App = () => (
<Router>
<Main>
<RouteWrapper
path="/"
render={props => {
return <Home {...props} />;
}}
/>
</Main>
</Router>
);