Question

我正在使用React，Redux和React-Router-Dom。我现有的大多数路由方案都可以使用<Link />和<Prompt />标签来覆盖。但是，在一种情况下，要求我使用一些“代码隐藏”而不是<Link />标记（到目前为止，在select选项中使用Link仍然不成功。）

在这种情况下，如何处理收听提示？如果用户在提示时取消操作，我想阻止我的调度（onSelect）触发，但是到目前为止，我还没有找到任何方法。

<Link />似乎是在“自动魔术地”收听与<Prompt />相对应的内容，我想知道它是什么，因此如果没有库，我也可以用类似的方式收听存在可以处理这种确切情况。

此外，我正在使用<Redirect />，但是一旦发生重定向，我就无法理解如何清除state.redirectArgs字段的状态，这给我带来了一系列不同的问题。 / p>

通常，当我无法在Google机器上找到一种情况时，这表明我正在打破我的编码模式中的一种范例，但是在这种情况下，我很难调和这一点，因此任何类型的答案（库，模式更改等）将我带到成功的终点（一点）。

Answer 1

我能够使用<Redirect />和<Prompt />解决此问题。关键是利用componentDidUpdate()的生命周期（似乎componentDidMount()也应该起作用，但至少在我的情况下不起作用）。此钩子是在render()方法之后调用的，这在这里很重要。

class SomeComponent extends React.Component<SomeComponentProps, never> {


    render() {
        // state
        const { redirect } = this.props;

        // dispatch
        const { onSelect } = this.props;

        if (redirect) {
            return <Redirect push to={redirect.path} />
        }

        ... other code, including onSelect which sets redirect ...
    }

    componentDidUpdate() {
        // state
        const { redirect } = this.props;
        // dispatch
        const { cleanupRedirect } = this.props;

        if (redirect) {
            cleanupRedirect();
        }
    }
}

export interface SomeComponentState {
    redirect: { path: string }
}

export interface SomeComponentDispatch {
    cleanupRedirect: () => void
    onSelect: (key: string) => void
}

export type SomeComponentProps = SomeComponentState & SomeComponentDispatch;

带提示的Redux：可用的库还是手动监听？

1 个答案: