下拉菜单、React 路由器和后退按钮

Question

当您从下拉列表中选择某些内容时，这个小组件会更改 URL。一切正常.. 除了后退按钮。如果我按下它，其他一切都会改变，但下拉菜单不会改变。

具体是怎样的？

• 如果我进入登录页面，默认值为 All
• 现在我选择红色
• 现在蓝色
• 红色再次
• 终于蓝色
• 现在，如果我单击返回按钮，下拉菜单始终显示最后选择的值（在我的示例中为 蓝色）

如何解决这个问题？

---

class MyComponent extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            selected: {
                // This only affects dropdown if landing to page 
                value: this.props.params.color, // Get param from url 
                label: // Some irrelevant uppercase magic here
            }
        }
    }

    static defaultProps = {
        colors: [
            {value: 'all', label: 'All'},
            {value: 'red', label: 'Red'},
            {value: 'blue', label: 'Blue'}
        ]
    }

    render() {
        return ( 
            <Dropdown 
                options={this.props.colors} {/* All options */}
                value={this.props.selected} {/* Selected option */}
                onChange={this.handleSelect.bind(this)} 
            />
        )
    }

    handleSelect(color) {
        this.setState({selected: color})
        browserHistory.push(`/${color.value}`)
    }
}

Answer 1

您的问题是您正在使用状态来管理您的 Dropdown 组件的 selected 属性，但是当您向后/向前导航时路由器不会更新它。

而是从您的组件中完全删除状态并使用路由器直接检测selected 项：

import { find } from 'lodash';

class MyComponent extends React.Component {

    static defaultProps = {
        colors: [
            {value: 'all', label: 'All'},
            {value: 'red', label: 'Red'},
            {value: 'blue', label: 'Blue'}
        ]
    }

    getSelected() {
        const colours = this.props.colours
        const selectedColour = this.props.params.colour

        // Find the option matching the route param, or
        // return a default value when the colour is not found
        return find(colours, { value: selectedColour }) || colours[0];
    }

    render() {
        const selectedOption = this.getSelected();
        return (
            <div>
                <Dropdown 
                    options={ this.props.colors } {/* All options */}
                    value={ selectedOption } {/* Selected option */}
                    onChange={ this.handleSelect.bind(this) } 
                />
                <p>You selected: { selectedOption.label }</p>
            </div>
        )
    }

    handleSelect(color) {
        browserHistory.push(`/${color.value}`)
    }
}