Question

我正在尝试使用RR4以编程方式导航。保存一些数据后，我想要像这样呈现Redirect：

handleSave = () => {    
    this.props.mutate({
      ...
    });

    this.setState({
      org: null
    });

    <Redirect to="/orgs" />
    // return <Redirect to="/orgs" /> // Tried this also
};

我没有收到错误，但Redirect没有呈现。如果我在render函数中添加switch语句，那么它将起作用：

render() {
    return ( this.state.rerender ? <Redirect to="/orgs" push /> :
        <View>
            ...
        </View>
        )
}

这就像我想要的那样，但我不喜欢三元声明。有没有办法可以将Redirect添加到保存功能，就像我在第一个例子中尝试过的那样？

Answer 1

使用history prop和push或replace方法。每条路线都可以获得它，但您也可以使用withRouter HOC将其注入其他组件。

文档。 https://reacttraining.com/react-router/web/api/history

Answer 2

此答案有很多很好的信息和示例：https://stackoverflow.com/a/42121109/76672

与路由器一起使用。

这对我非常有用：

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

如何在render函数之外调用react router 4重定向？

2 个答案: