在 React 中更新位置时打开一个模式答案

【问题标题】：Open a Modal when updating location in React在 React 中更新位置时打开一个模式
【发布时间】：2021-09-30 01:18:49
【问题描述】：

我正在使用 React Router，当 url 位置更改而不刷新页面时，我需要显示一个模式。我该怎么做？

【问题讨论】：

【解决方案1】：

为具有额外参数的相同组件创建路由并添加模式 id 参数存在于该组件中

<Route path="/users">
            <Users />
          </Route>
          <Route path="/users/:x">
            <Users />
  </Route>

然后

var {x} = useparam();

if(x)
//open modal

【讨论】：

【解决方案2】：

您可以使用历史 API 订阅位置更改。在下面的示例中，history.listen() 函数返回一个取消订阅函数，因此我们可以在组件卸载后进行清理。

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom'

const App = ({ history }) => {
    const history = useHistory();

    useEffect(() => history.listen(({action, location})) => {
        //modal logic
    }), []);

    //...
}

export default App;

【讨论】：

但是模态会打开，重定向不会生效？