ReactJS，渲染后重定向

Question

有沒有辦法或如何在render return后重定向？

我想要的是做這樣的事情：

render() {
  return(<div>You have no access</div>)
  // then redirect to "/"

我正在考慮創建一個在 3 秒后在 componentDidMount 中只有重定向的componentDidMount ，例如名為<Redirect>然后像這樣使用它：

render() {
  return(<Redirect time=3> <div>You have no access</div> </Redirect>
  // then redirect to "/"

重定向.js

componentDidMount() {
  // code for redirect using with this.props.time

還有其他方法嗎？

Answer 1

是的，您可以實現這種重定向。

由於可以在路由時傳遞數據，因此可以將prev URL傳遞給該組件，以代替/ ，實現return to prev page 。

componentDidMount() {
  const intervalId = setInterval(this.timer, 1500);
  this.setState({ intervalId: intervalId });
}
componentWillUnmount() {
  clearInterval(this.state.intervalId);
}
timer = () => {
  this.props.history.push("/");
};

剩下的唯一事情就是根據代碼需求使其成為通用組件或用於auth檢查的 HOC。

---

在線試一下：