Question

React Router V4只运行了一段时间，并且没有关于动态路由的明确文档[类似于V3中的transtionsTo(...)]我觉得这个问题的简单答案可能会让很多人受益。所以我们走了。

让我们假设以下理论场景：一个具有容器的组件，其中包括另外两个组件（选择和显示）。现在在功能方面：容器包含状态，可以通过选择更改，显示根据所述状态显示数据。

现在如何通过反应路由器更改URL以及状态更改触发的状态？

有关更具体的示例，请参阅（React Router V4 - Page does not rerender on changed Route）。但是，我觉得有必要概括和缩短问题，以便随处可见。

Answer 1

由[Tharaka Wijebandara]提供此问题的解决方案是：让容器组件为选择组件提供一个回调函数，该函数必须至少在容器上执行以下操作：

props.history.push（Selection coming from Selection）;

请在下面找到容器（称为Geoselector）组件的示例，将setLocation回调传递给选择（称为Geosuggest）组件。

class Geoselector extends Component {
    constructor (props) {
        super(props);
        this.setLocation = this.setLocation.bind(this);
        //Sets location in case of a reload instead of entering via landing
        if (!Session.get('selectedLocation')) {
            let myRe = new RegExp('/location/(.*)');
            let locationFromPath = myRe.exec(this.props.location.pathname)[1];
            Session.set('selectedLocation',locationFromPath);
        }
    }

    setLocation(value) {
        const newLocation = value.label;
        if (Session.get('selectedLocation') != newLocation) {
            Session.set('selectedLocation',newLocation);
            Session.set('locationLngLat',value.location);
            this.props.history.push(`/location/${newLocation}`)
        };
    }


    render () {
        return (
            <Geosuggest 
                onSuggestSelect={this.setLocation} 
                types={['(cities)']}
                placeholder="Please select a location ..."
            />
        )
    }
}

需要动态路由的最佳实践（反应路由器v4）？

1 个答案: