javascript - 带有历史推送的 Reactjs 路由，但仅更改 URL 的视图

问题描述

我正在使用一个菜单，它有一个 ListGroupItem 并尝试使用历史推送重定向另一个组件，但只更改 url！这个 url 有效，但它不会改变视图，我必须按 enter 才能使这个工作。

我是 react 新手，尤其是路由器，我对此感到迷茫。谢谢你的帮助。

这是我的 App.js

import React, { Component } from 'react';
import './css/App.css';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Prueba from './Prueba';
import Menu from './header/Menu';

class App extends Component {

  toggle(menu) {
    if (this.state.collapse == menu){
      this.setState({ collapse: false }); 
    }else {
      this.setState({ collapse: menu });
    }
  }

  render() {
    return (
      <BrowserRouter>
       <Menu/>
       <Prueba/>
      </BrowserRouter>
    );
  }
}

export default App;

这是我的另一个名为 Prueba.js 的组件

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

class Prueba 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');
  }

  componentDidUpdate(){

  }

  toggle(menu) {

    if (this.state.collapse == menu){
      this.setState({ collapse: false }); 
    }else {
      this.setState({ collapse: menu });
    }   
  }

  render() {
    return (
  <BrowserRouter>

    <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="/Pais" component={Pais} />
            </Container>
          </Col>        
        </Row>
      </div>
     </BrowserRouter>
    );
  }
}

export default withRouter(Prueba);

最后，这是我想在历史推送中看到的组件，名为 Pais。

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);

标签： javascriptreactjs

javascript - 带有历史推送的 Reactjs 路由，但仅更改 URL 的视图

问题描述

解决方案

推荐阅读