0

我正在使用 react js typescript 创建身份验证。当登录不成功或者isLogin = false我想将 URL 重定向到"/"包含该Login组件的路径时。当登录成功或者isLogin = true我想将 URL 重定向到具有仪表板组件的仪表板路径时。至此URL 已成功重定向，但未调用该组件。

function App() {
    const { state } = useContext(AuthContext)
    
    return (
        <BrowserContext>
            <Switch>
                {!state.isLogin
                    ? <Redirect to="/" />
                    : <Redirect to="/dashboard" />
                }
                <Route exact path="/" component={Login} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/register" component={Register} />
            </Switch>
        </BrowserContext>
    )
}
4

2 回答 2

0

问题是您编写的重定向逻辑仅在App组件初始化时运行一次。因此，任何后续更改state.isLogin都不会触发重新渲染。

你需要在useEffect这里使用钩子。

在钩子中，您可以编写重定向逻辑并添加state.isLogin为依赖项，更新时将触发重新呈现您的重定向逻辑。

于 2021-06-22T04:37:03.287 回答
0

问题是Switch组件渲染首先适合Route或Redirect组件。所以正如执行达到：

{!state.isLogin
    ? <Redirect to="/" />
    : <Redirect to="/dashboard />
}

它根据标志呈现第一个重定向组件或第二个重定向组件，并且永远不会进一步进入Route块。

你有几个选项可以让它工作。

  • 声明性：
function App() {
    const { state } = useContext(AuthContext)
    
    return (
        <BrowserContext>
            <Switch>
                <Route exact path="/" render={() => {
                    if (state.isLogin) return <Redirect to="/dashboard" />
          
                    return <Login />
                }} />
                {!state.isLogin ? <Redirect to="/" /> : null}
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/register" component={Register} />
            </Switch>
        </BrowserContext>
    )
}

在这里，如果路径是，/那么它将检查isLogin标志并重定向到/dashboard是否已设置，Login如果未设置则呈现。如果 path 不是/并且isLoginflag 没有设置，它将重定向到/. 如果isLogin已设置，它将落入下一个Route组件。

  • 命令式 显示完整代码的时间相当长。这将需要大量的重构。您必须移动BrowserRouter到App. 使可以从hocApp访问history道具。withRouter然后用于在更改React.useEffect时执行重定向isLogin：
const { history } = props
...
React.useEffect(() => {
    history.push(state.isLogin ? "/dashboard" : "/")
}, [state.isLogin, history])
于 2021-06-22T08:07:56.377 回答