如何在 React 中重定向到另一个视图

Question

我正在开发一个需要登录的应用程序，单击登录按钮后，我需要重定向到另一个布局中的另一个视图，我尝试使用 this.props.history.push("/Inicio ") 在登录成功时重定向。在这种情况下，这是路径。

{
path: "/Inicio",
name: "Inicio",
component: Inicio,
layout: "/admin"
},

这是完整的代码

import React, { Component } from "react";
import {
   Grid,
   Col
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

class Login extends Component {
constructor(props) {
  super(props)
  this.state = {
      users: [],
      user: '',
      pass: '',
      msg: '',
      apiResponse:''
  }
  this.logChange = this.logChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this)
}

handleSubmit(event) {
  event.preventDefault()
  var data = {
    user: this.state.user,
    pass: this.state.pass,
    msg: this.state.msg,
    apiResponse: this.state.apiResponse
  }
  console.log(data)
  fetch("http://localhost:9000/log/Login", {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
  }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
  }).then((data) => {
    if(data == "success"){
      console.log(data) 
      this.setState({users: data});
      this.props.history.push("/Inicio");
      window.location.reload();
    }
    else{
      if(data == 'El usuario o la contraseña no coinciden'){
        this.setState({ apiResponse: data })
      }
      
    }
  }).catch(function(err) {
      console.log(err)
  });
  }
  logChange(e) {
  this.setState({[e.target.name]: e.target.value});

  }

render() {
return (
  <div className="content">
    <p class="col-md-4"></p>
    <Grid >
        <Col md={5}>
          <Card
          
            title="Login"
            content={
              <form method='POST' onSubmit= {this.handleSubmit}>
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Usuario",
                      type: "text",
                      bsClass: "form-control",
                      placeholder: "Usuario",
                      maxlength: 20 ,
                      name: "user",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Contraseña",
                      type: "password",
                      bsClass: "form-control",
                      placeholder: "Contraseña",
                      maxlength: 20,
                      name: "pass",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p >{this.state.apiResponse}</p>
                <br/>
                <br/>
                <Button bsStyle="info" pullRight fill type="submit">
                  Login
                </Button>
                <Button bsStyle="info" pullLeft fill type="submit">
                  Olvide mi Contraseña
                </Button>
                
                
              </form>
            }
          />
        </Col>
    </Grid>
    
 </div>
);
}
}

export default Login;

但在 handleSubmit() 中一切正常，除了 this.props.history.push("/Inicio") 因为它什么也没做。

index.js 代码

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";
import LoginLayout from "layouts/LoginLayout.jsx";
import EfoodLayout from "layouts/EFoodLayout.jsx";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/login" render={props => <LoginLayout {...props} />} />
        <Route path="/Efood" render={props => <EfoodLayout {...props} />} />
        <Redirect from="/" to="/login/Login" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

登录布局

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import LoginNavbar from "components/Navbars/LoginNavbar";
import Footer from "components/Footer/Footer";


import routes from "routes.js";

class Login extends Component {

getRoutes = routes => {
return routes.map((prop, key) => {
  if (prop.layout === "/login") {
    return (
      <Route
        path={prop.layout + prop.path}
        render={props => (
          <prop.component
            {...props}
            handleClick={this.handleNotificationClick}
          />
        )}
        key={key}
      />
    );
  } else {
    return null;
  }
});
};
getBrandText = path => {
return "Bienvenido a E Food";
};

render() {
 return (
   <div className="wrapper">
      <LoginNavbar 
        brandText={this.getBrandText(this.props.location.pathname)}
        
      />
      <Switch>{this.getRoutes(routes)}</Switch>
      <Footer />
      
   </div>
  );
 }
} 

export default Login;

希望你能帮助我，并感谢所有回答的人。 PD：如果您需要我的代码中的更多内容，请告诉我。

Answer 1

好的，因为很明显您要在其中进行导航的组件是一个深度嵌套的组件，所以有几个选项。

道具钻孔（不推荐）

prop drilling

道具钻探的缺点是，如果一开始没有传递正确的道具，或者如果任何组件在此过程中忘记传递道具，那么某些子组件将无法接收他们需要什么，并且可能很难追踪丢失的内容或原因。由于现在对 this 组件的任何更改都需要关注它周围的所有其他组件，因此维护起来更加困难。道具钻孔实际上是一种反应反模式。

登录布局

您的LoginLayout 组件似乎使用了一个路由配置对象并动态呈现路由。它需要传递从其父级接收到的路由道具。此处和您要使用 history.push 的 Login 之间的任何组件都需要继续向下传递所有道具。

class Login extends Component {
  getRoutes = routes => {
    return routes.map((prop, key) => {
      if (prop.layout === "/login") {
        return (
          <Route
            path={prop.layout + prop.path}
            render={props => (
              <prop.component
                {...props}
                {...this.props} // <-- Pass on all props passed to this component
                handleClick={this.handleNotificationClick}
              />
            )}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };
  
  ...

  render() {
    return (
      ...
    );
  }
}

使用withRouter高阶组件（推荐）

withRouter

您可以访问 history 对象的属性和最近的 <Route> 的 match 通过 withRouter 高阶组件。 withRouter 将更新的 match、location 和 history 道具传递给被包装的 组件无论何时呈现。

import React, { Component } from "react";
import { withRouter } from 'react-router-dom'; // <-- import HOC
import { Grid, Col } from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

class Login extends Component {
  constructor(props) {
    ...
  }

  handleSubmit(event) {
    event.preventDefault();
    var data = {
      user: this.state.user,
      pass: this.state.pass,
      msg: this.state.msg,
      apiResponse: this.state.apiResponse
    };
    console.log(data);
    fetch("http://localhost:9000/log/Login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    })
      .then(function(response) {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then(data => {
        if (data == "success") {
          console.log(data);
          this.setState({ users: data });
          this.props.history.push("/Inicio"); // <-- history prop should now exist
          window.location.reload();
        } else {
          if (data == "El usuario o la contraseña no coinciden") {
            this.setState({ apiResponse: data });
          }
        }
      })
      .catch(function(err) {
        console.log(err);
      });
  }
  logChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    return (
      <div className="content">
        ...
      </div>
    );
  }
}

export default withRouter(Login); // <-- decorate Login with HOC

Answer 2

您是否使用react-router-dom 来处理您的路由？如果是这样，您可以使用the hooks to navigate。

import { useHistory } from "react-router-dom";
...
const history = useHistory()

...
history.push('/Inicio')

请注意，这仅适用于 React 版本 >= 16.8

您的代码无法运行的原因是绑定。

使用this.props.history.push("/Inicio") 时，this 指的是您所在的函数，而不是组件历史记录。

如果你想保持你的代码那样，你可以简单地将你的函数变成一个箭头函数：

  .then((data) => {
      if(data == "success"){
        console.log(data) 
        self.setState({users: data});
        **this.props.history.push("/Inicio")** // now this will be correct
        **window.location.reload();** // no need, react handles the reload
      }
      else{
        if(data == 'El usuario o la contraseña no coinciden'){
          self.setState({ apiResponse: data })
        }
        
      }

不过，我强烈建议使用 react 的最新功能（检查钩子，它真的很有用）。