How can I pass props to 'this.props.children' when using react-router?

Question

I have a state 'isLoggedIn' in App Component.

Now, I want to pass this state as props to the child component 'Secret Component'.

<BrowserRouter>
    <App>
        <Switch>
            <Route path='/secret' component={Secret} />
            <Route path='/' component={Top} />
        </Switch>
    </App>

</BrowserRouter>

But, I'm using react-router(ver4.1) like this and can't figure out how to pass the state of App Component as props to its child component.

 const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

I know, by doing like this, I can get an access to this.props.children and set additional props to them but since I wrap my components with Router Component, the children of App Component are now Route components, which makes it complicated...

Could anyone please tell me how to do it?

I'm also worried if I'm doing wrong on how to use react-router.

thanks!

index.js(entry point)

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from './components/App';
import Secret from './components/Secret';
import Top from './components/Top';

ReactDOM.render(
    <BrowserRouter>
        <App>
            <Switch>
                <Route path='/secret' component={Secret} />
                <Route path='/' component={Top} />
            </Switch>
        </App>

    </BrowserRouter>
    ,
    document.querySelector('.container')
);

App.js

import React, { Component } from 'react';

import NavigationMenu from './NavigationMenu';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        };
        this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this);
    }


    toggleAuthenticationStatus() {
        this.setState({
            isLoggedIn: !this.state.isLoggedIn
        });
    }


    render() {

        //I want to pass this.state.isLoggedIn as props to Secret Component!!!

        const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

        return (
            <div>
                <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
                {this.props.children}
            </div>
        )
    }
}

Secret.js

import React, { Component } from 'react';

class Secret extends Component {

    constructor(props) {
        super(props);
    }


    componentWillMount() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    componentWillUpdate() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    render() {
        return (
            <div>
                This content is only for our members!
            </div>
        )
    }
}

export default Secret;

Tharaka Wijebandara Tharaka Wijebandara · Accepted Answer · 2017-06-17T06:16:22

In react-router v4 recommended approach is putting nested routes inside the parent component instead of pass those as children (see the basic example of react-router v4). So in your case, I suggest you to simply replace {this.props.children} with Routes with the Switch component and stop passing them as the children of App. Then you can use render method of Route to pass props to the Secret component as usual.

return (
  <div>
    <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
    <Switch>
      <Route path='/secret' render={() => <Secret isLoggedIn={this.state.isLoggedIn}/>)} />
      <Route path='/' component={Top} />
    </Switch>
  </div>
)

How can I pass props to 'this.props.children' when using react-router?

index.js(entry point)

App.js

Secret.js

1 Answers