Window.location在ComponentDidMount（）中工作不一致

Question

我试图通过将window.location设置为自定义uri来将用户重定向到本机应用程序，因此如果用户安装了该应用程序，它将在应用程序中打开该页面。

登录组件：

componentDidMount() {
        const { match: { params: { domain } } } = this.props
        if (domain) this.setState({ domain })
        if (typeof window !== 'undefined') {
            window.location = `clickclock://login/potato`
       }

    }

它通过反应路由器呈现：

<Route path="/login/:domain?" render={props => status ? redirect("/") : <LoginPanel {...props} onLogin={onLogin} />} />

问题是，当按下此按钮时，重定向会起作用，该按钮会推送历史记录以显示登录组件：

<Button text="Login" onClick={() => { history.push('/login') }} />

但是在该路径中直接加载或重新加载页面时它不起作用。

Answer 1

看来当你直接加载页面时，路由机制失败了。

如果您正在使用服务器端渲染，那么您也应该在服务器端配置/login路由。

如果您只使用webpack（您的站点是静态站点），那么您应该确保在右侧文件夹中有一个名为login.html的文件。

Answer 2

我想你会通过使用react-router的Redirect组件解决这个问题，如下所示：

import { Redirect } from 'react-router'

/* some code */ 

<Route path="/login/:domain?" render={props => status ? <Redirect to="/"/> : <LoginPanel {...props} onLogin={onLogin} />} />

Answer 3

我发现window.location更改必须与要工作的用户操作相关（例如按钮单击）。 我所做的是一个询问用户他想做什么的屏幕，并根据用户的反应我做了或不做window.location更改。