Question

我具有从API获得令牌的登录功能。

在POST请求成功后，我想用props更改组件。我知道如何响应DOM，但是如何在React Router中实现呢？

我的带有ReactDOM渲染的功能。

 log = (z) => {
      axios.post(apiurl+"api/Auth/Login",
          {Username : this.state.username , Password : this.state.password },
          {headers : {'Content-Type': 'application/json'} })
          .then(res => {
           ReactDOM.render(<Hometoken = {res.data.token}  />, document.getElementById("root"));
          })
      .catch(error => swal(error.response.data.message));
    }

，我尝试将其更改为重定向

log = (z) => {
      axios.post(apiurl+"api/Auth/Login",
          {Username : this.state.username , Password : this.state.password },
          {headers : {'Content-Type': 'application/json'} })
          .then(res => {
           return (<Redirect path="/Home" component={(res) => (<Hometoken = {res.data.token} username = {res.data.nazwa} />)}/>) 
          })
      .catch(error => swal(error.response.data.message));
    }

Answer 1

您可以使用props.history.push("/home")或在类组件this.props.history.push("/home")中使用。

您将需要访问Router道具，因此需要使用withRouter HOC导出组件

使用路由器（组件）导出默认值

用React路由器中的道具更换组件

1 个答案: