Question

我正在处理反应路线。试图创建一个菜单并从他那里重定向，但是路由和历史记录推送时出现错误。我知道这个重复的问题，但我从堆栈中读取，我仍然有疑问，我不知道为什么我做错了。很抱歉出现问题，但这是我的代码：

这是我的App.js

import React, { Component } from 'react';
import './css/App.css';
import { BrowserRouter, Route,Link} from 'react-router-dom';
import Prueba from './Prueba';
import { ListGroup, ListGroupItem,Collapse, Container, CardBody, Card, Row, Col} from 'reactstrap';
import Menu from './header/Menu';
import Pais from './UbicacionGeneral/Pais';
import history from './UbicacionGeneral/Pais';

class App extends Component {


  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
    this.routeChange = this.routeChange.bind(this);
  }


  routeChange() {

    this.props.history.push('Pais');
  }


  toggle(menu) {

  if (this.state.collapse == menu){

    this.setState({ collapse: false }); 

  }else {

    this.setState({ collapse: menu });

  }

  }


 render() {

    return (


  <BrowserRouter>
   <Menu/>
    <div className="App text-center">
      <Row>
        <Col  md="2">
          <ListGroup className="List-Principal">
            <ListGroupItem className="List-Principal-Item " onClick={() => this.toggle("ubicacion")} > Ubicacion General </ListGroupItem>

             <Collapse isOpen={this.state.collapse == "ubicacion"}> 
              <ListGroup>
                <ListGroupItem  onClick={this.routeChange} > Pais </ListGroupItem>
                <ListGroupItem  > Estado </ListGroupItem>
                <ListGroupItem  > Ciudad </ListGroupItem>
              </ListGroup>
            </Collapse>

          <ListGroupItem  className="List-Principal-Item tex-center" 

onClick={() => this.toggle("almacen")} > Almacen </ListGroupItem>
                <Collapse  isOpen={this.state.collapse == "almacen"}>
                  <ListGroup>
                    <ListGroupItem  > Crear - Modificar  </ListGroupItem>
                    <ListGroupItem  > Verificar Stock   </ListGroupItem>
                    <ListGroupItem  > Movimientos  </ListGroupItem>
                  </ListGroup>
                </Collapse>
            </ListGroup>

          </Col>

          <Col  md="10">   
            <Container>
              <Route path="/Prueba" component={Prueba} />
              <Route path="/Pais" component={Pais} />
            </Container>
          </Col>        
        </Row>
      </div>
     </BrowserRouter>
    );
  }
}

export default App;

这是我的Pais.js

    import React, { Component } from 'react';
import { ListGroup, ListGroupItem,Collapse, Container, CardBody, Card, Row, Col} from 'reactstrap';
import { Alert } from 'reactstrap';
import { withRouter } from 'react-router-dom';


class Pais extends Component {

  render() {

      return (
        <div>

        <Alert color="primary">
          This is a primary alert — check it out!
        </Alert>
        <Alert color="secondary">
          This is a secondary alert — check it out!
        </Alert>
        <Alert color="success">
          This is a success alert — check it out!
        </Alert>
        <Alert color="danger">
          This is a danger alert — check it out!
        </Alert>
        <Alert color="warning">
          This is a warning alert — check it out!
        </Alert>
        <Alert color="info">
          This is a info alert — check it out!
        </Alert>
        <Alert color="light">
          This is a light alert — check it out!
        </Alert>
        <Alert color="dark">
          This is a dark alert — check it out!
        </Alert>



    </div>
    );
    }

}


export default withRouter (Pais);

我试图从ListGroupItem的App.js中单击Pais菜单，但做出反应显示此错误：

× TypeError：无法读取未定义的属性“ push”

  22 | routeChange() {
  23 | 
> 24 |   this.props.history.push('Pais');
     | ^  25 | }
  26 |

我真的很坚持，谢谢您的帮助！

Answer 1

使用withRouter hoc包装组件，将位置，历史记录和匹配道具传递给该组件。道具无法导入。在您的情况下，您想创建一个新的组件，该组件使用withRouter hoc在浏览器路由器下方的某个位置，然后将路由更改移到该位置。例如

MyComponent.js

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
    this.routeChange = this.routeChange.bind(this);
  }

  routeChange() {
    this.props.history.push("Pais");
  }

  toggle(menu) {
    if (this.state.collapse == menu) {
      this.setState({ collapse: false });
    } else {
      this.setState({ collapse: menu });
    }
  }
  render() {
    return (
      <div className="App text-center">
        <Row>
          <Col md="2">
            <ListGroup className="List-Principal">
              <ListGroupItem
                className="List-Principal-Item "
                onClick={() => this.toggle("ubicacion")}
              >
                {" "}
                Ubicacion General{" "}
              </ListGroupItem>

              <Collapse isOpen={this.state.collapse == "ubicacion"}>
                <ListGroup>
                  <ListGroupItem onClick={this.routeChange}>
                    {" "}
                    Pais{" "}
                  </ListGroupItem>
                  <ListGroupItem> Estado </ListGroupItem>
                  <ListGroupItem> Ciudad </ListGroupItem>
                </ListGroup>
              </Collapse>

              <ListGroupItem
                className="List-Principal-Item tex-center"
                onClick={() => this.toggle("almacen")}
              >
                {" "}
                Almacen{" "}
              </ListGroupItem>
              <Collapse isOpen={this.state.collapse == "almacen"}>
                <ListGroup>
                  <ListGroupItem> Crear - Modificar </ListGroupItem>
                  <ListGroupItem> Verificar Stock </ListGroupItem>
                  <ListGroupItem> Movimientos </ListGroupItem>
                </ListGroup>
              </Collapse>
            </ListGroup>
          </Col>

          <Col md="10">
            <Container>
              <Route path="/Prueba" component={Prueba} />
              <Route path="/Pais" component={Pais} />
            </Container>
          </Col>
        </Row>
      </div>
    );
  }
}
export default withRouter(MyComponent);

App.js
class App extends Component {
 <BrowserRouter>
   <Menu/>
   <MyComponent/>
 </BrowserRouter>
}

但是，仅在ListGroupItem内使用Link会更简单，更具声明性


import {Link} from "react-router-dom";
...
 <ListGroupItem  onClick={this.routeChange} > <Link to="Pais">Pais </Link> </ListGroupItem>

通过这种方式，您无需弄乱历史记录或使用withRouter

反应路由和history.push

1 个答案: