ReactJs Router Duplicates itself when wrap it in component

Question

I'm beginner in react, I'm using React 4, Redux and react-router-dom package for my router.

I have an App.js file which connects Main with mapStateToProps & mapDispatchToProps

//App.js
const App = connect(mapStateToProps, mapDispatchToProps)(Main);

My Main component renders a header and clones child elements

//Main.js
export default class Main extends React.Component {
    render() {
        return (
            <div>
                <h1>Hi I'm Header</h1>
                {React.cloneElement(this.props.children, this.props)}
            </div>
        );
    }
}

My child components contains a simple Json stringify of props

//UserList.js
export default class UsersList extends React.Component {
    render(){
        return (
            <pre>
                {JSON.stringify(this.props, null, "")}
            </pre>
        );
    }
}

I made an index.js file which has a route and contains provider, and provider child is a router and my router contains other app routes

//index.js
const router = (
    <Provider store={store}>
        <App>
            <Router history={history}>
                <Switch>
                    <Route exact path="/" component={UsersList}/>
                </Switch>
            </Router>
        </App>
    </Provider>
);
render(router, document.getElementById('root'));

As you see I have an App, my app connects main to mapstatetoprops and mapdispatchtoprops, and finally gives the child route (UsersList component) to the parent (Main Component) and in the end it renders the child.

When I stringify the child component props it show only history, location and other props of route, but it's not showing my Users props which is the default state of the app!

And when I use react developer tools it shows there is other router inside my router!

Duplicated Router Screenshot

I found out that when I put the router in something (component, element or whatever like ) it creates another router inside itself and the child router doesn't have the parent props.

I also tried to add

{...this.props}

to routes or

render={(props) => <UserList {props} />}

and also another way that I tried was using nested routes like

const router = (
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <Route exact component={UsersList}/>
                <Route path="/single/:id" component={SingleUser}/>
            </Route>
        </Router>
    </Provider>
);

but the result was this error:

React.cloneElement(...): The argument must be a React element, but you passed undefined.

Thanks.

Shubham Khatri · Accepted Answer · 2018-06-12T08:18:45.240

0

Since you want to pass the props from App component to UsersList, you need to restructure your Routes differently since with the current way, the props are passed on to the Router, but Router doesn't pass them down to the Route component

index.js

const router = (
    <Provider store={store}>
        <Router history={history}>
             <Route component={App} />
        </Router>
    </Provider>
);
render(router, document.getElementById('root'));

Main.js

export default class Main extends React.Component {
    render() {
        return (
            <div>
                <h1>Hi I'm Header</h1>
                <Switch>
                    <Route exact path="/" render={(routerProps) => <UsersList {...this.props} {...routerProps}/>}/>
                </Switch>
            </div>
        );
    }
}

edited Jun 12 '18 at 08:18

answered Jun 12 '18 at 07:06

Shubham Khatri

211,155
45
305
318

thanks mate, i made the changes and route duplicate solved, but the main is not passing down props, my Main has Users prop but nested switch, route and rendered UserList no. i also add {...this.props} to routes of main and index but nothing happened – Reza Erami Jun 12 '18 at 07:38
Does the main component have the desired props, if yes then rendering it like ` }/>` will give you the desired result. I just updated the answer to use spread syntax which I forgot in my original post – Shubham Khatri Jun 12 '18 at 08:19
hell yeah it worked... thank you so much mate, but why it happens? – Reza Erami Jun 12 '18 at 08:40
We need to pass it down tothe USerList component, check this https://stackoverflow.com/questions/44255415/passing-custom-props-to-router-component-in-react-router-v4/44255850#44255850 – Shubham Khatri Jun 12 '18 at 08:47

ReactJs Router Duplicates itself when wrap it in component

1 Answers1