Question

请考虑以下内容：

export const OrganizationEventSelector = 
        inject('organizationStore', 'routingStore')(observer(class EventSelector extends Component {
    constructor(props) {
        super(props);
    }

    gotoPreviousTab = () => {
        const {routingStore} = this.props;
        routingStore.goBack();
    };

    render() {
        const {classes, onEnrollEvents, match} = this.props;
        console.log(match.params[0]);
        const remainingPath = match.params[0] || "";
        const idx =  remainingPath ? 1 : 0;

        return (<>
            <div>
                <Toolbar disableGutters={true}>
                    {idx > 0 &&
                        <div>
                            <IconButton onClick={this.gotoPreviousTab}>
                                <ChevronLeftIcon />
                            </IconButton>
                        </div>
                    }
                    <Typography >
                        {idx === 0 ? "Organizations" : "Details"}
                    </Typography>
                </Toolbar>
            </div>
        </>);
    }
}));

此组件位于以下路线中：

<Switch>
    <Route path={['/', '/home']} exact component={HomeView}/>
    <Route path={['/organizations']} exact component={OrganizationEventSelector}/>
    <Route path={['/organizations/*']} component={OrganizationEventSelector}/>
</Switch>

现在，转到URL SITE/organizations时，它可以正确显示“组织”标题。而且，如果我转到下一页（位于另一个组件中的按钮），则该URL会变成SITE/organizations/org-0，并且正确显示了“后退图标”和“详细信息”。

但是，如果我随后单击IconButton，URL 已更新（更新为SITE/organizations），并且添加断点/控制台日志显示了render函数被调用。 / p>

但是在渲染match.params [0] = org-0时。好像该网址没有更新，甚至更糟：match.url实际上仍然是SITE/organizations/org-0。

那为什么会发生呢？以及如何在URL更新后重新渲染组件（或让他们知道新的URL）。

编辑：我注意到该网站确实可以在Firefox中运行。只是在Chrome中“不起作用”。

当回溯历史时，React路由器路由的match.params不显示“ new”值

0 个答案: