组件挂载上的 React hook Redirect
Posted
技术标签:
【中文标题】组件挂载上的 React hook Redirect【英文标题】:React hook Redirect on component mount 【发布时间】:2019-12-22 05:08:46 【问题描述】:我在成功登录后尝试管理会话,同时重定向到表单提交时的某个页面。
我通常会在类组件中这样做:
componentDidMount()
if (context.token)
return <Redirect to="/" />
但是我想使用 React 钩子,因此;以下代码不会重定向到任何地方:
import React, useEffect from "react";
import ReactDOM from "react-dom";
import BrowserRouter, Switch, Route, Redirect, Link from "react-router-dom";
es6
const HomePage = props => (
<div>
<h1>Home</h1>
</div>
);
const AboutUsPage = props =>
useEffect(() =>
redirectTo();
, []);
return (
<div>
<h1>About us</h1>
</div>
);
;
function redirectTo()
return <Redirect to="/" />;
function App()
return (
<div className="App">
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/us">About us</Link>
</nav>
<Switch>
<Route exact path="/" component=HomePage />
<Route exact path="/us" component=AboutUsPage />
</Switch>
</BrowserRouter>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
工作沙盒:https://codesandbox.io/s/blue-river-6dvyv?fontsize=14
我已经读到如果钩子useEffect()
返回一个函数,它只会在组件卸载时起作用。但它应该在组件被挂载时重定向。
有什么建议吗?提前致谢。
【问题讨论】:
【参考方案1】:您可以在状态上设置redirect
变量并基于它在渲染中重定向:
const AboutUsPage = props =>
const [redirect, setRedirect] = useState(false);
useEffect(() =>
setRedirect(true); // Probably need to set redirect based on some condition
, []);
if (redirect) return redirectTo();
return (
<div>
<h1>About us</h1>
</div>
);
;
【讨论】:
这行得通,但是如果我可以在redirectTo()
中进行相同的逻辑,我为什么要使用useEffect()
?我可以完全省略钩子并在返回 JSX 之前调用函数。
这取决于,如果你只想做一个重定向,那么无论如何都不需要 Hook。但是如果你有一些复杂的逻辑连接到组件的状态来决定是否重定向,你需要使用 Hook。【参考方案2】:
您可以使用它,以便组件根据页面是否被赋予令牌来选择性地呈现页面。
const AboutUsPage = (token) => (
token ? (
<Redirect to="/" />
) : (
<div>
<h1>About us</h1>
</div>
)
);
但是,如果您在使用 React Hooks 实现此功能时仍想使用上下文,您可以在此 article 中阅读如何将 context
与钩子一起使用。它向您展示了如何仅用几行代码将 context
合并到 React 中。
import React, createContext, useContext, useReducer from 'react';
export const StateContext = createContext();
export const StateProvider = (reducer, initialState, children) =>(
<StateContext.Provider value=useReducer(reducer, initialState)>
children
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
使用钩子和上下文完成后,您的 AboutUsPage
组件将类似于这样。
import useStateValue from './state';
const AboutUsPage = () =>
const [token, dispatch] = useStateValue();
return token ? (
<Redirect to="/" />
) : (
<div>
<h1>About us</h1>
</div>
);
;
【讨论】:
【参考方案3】:从“react-router-dom”导入Redirect, Switch;
在 Switch 内部......
<Switch>
<Redirect exact from="/" to="/home" />
</Switch>
这解决了我的问题。
【讨论】:
以上是关于组件挂载上的 React hook Redirect的主要内容,如果未能解决你的问题,请参考以下文章