在反应路由器呈现新组件时设置状态

Question

好的，有一个手风琴组件，它默认关闭所有标签（下面的代码中只有一个标签是动态的），如果用户从特定链接输入组件，则会自动打开：

class Me extends Component {
    constructor (props) {
        super(props);

        const routerState = this.props.location.state;
        this.state = { showCourses: routerState ? routerState.showCourses : false };
        this.coursesHandler = this.coursesHandler.bind(this);
        this.logout = this.logout.bind(this);
    }

    coursesHandler () {
        var toggle = !this.state.showCourses;
        this.setState({ showCourses: toggle })
    }

    logout () {
        window.localStorage.removeItem('celledCredentials');
        this.props.logout();
        hashHistory.push('/');
    }

    render () {
        console.log(this.props)
        return (
            <div>
                <h1 className="me-page-title">CHECK YOUR PROGRESS!</h1>
                <h2 className="me-page-subtitle" onClick={this.coursesHandler}>Courses</h2>
                {this.state.showCourses && <CoursesList /> }
                <h2 className="me-page-subtitle not-active">Personal Information</h2>
                <h2 className="me-page-subtitle not-active">Log in information</h2>
                <h2 onClick={this.logout} className="me-page-subtitle not-active">Logout</h2>
            </div>
        );
    }
}

function mapDispatchToProps (dispatch) {
    return bindActionCreators({ logout }, dispatch);
}

export default connect(null, mapDispatchToProps)(Me);

问题是，我需要添加一个链接到组件的打开选项卡版本（例如，state.showCourses === true）。

我设法使用＆＃34;州＆＃34; react-router的Link组件内的参数。请参阅以下主要组件中的代码呈现方法：

render () {

        return (
            <div className="cm-page-container">
                <Link to={{ pathname: '/me', state: { showCourses: true } }}><h1 className="cm-page-title">{this.props.mainCourse.moduleData['main-title']}</h1></Link>
                <h2 className="cm-page-subtitle">{this.props.mainCourse.moduleData['sub-title']}</h2>
                <AudioPlayer audioUrl={this.props.mainCourse.audioUrl} />
                <h3 className="cm-page-chat-title">MESSAGES</h3>
                <Chat messages={this.props.mainCourse.messages} />
                <UserInput disable={this.props.mainCourse.inputDisable} submitUserAnswer={this.submitUserAnswer} />
            </div>
        );
    }
}

这是有效的，但我猜不是很优雅，我相信有更好的方法。我是对的吗？

提前致谢！