使用历史推送的Reactjs路由，但只能更改URL的视图

Question

I'm working with a menu and this have a ListGroupItem and try to redirect another component with history push but only change in the url! This url works but it doesn't change the view, I have to press enter to make this work.

I'm new with react, especially with the router, and I'm feeling lost with this. Thanks for any help.

This is my 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;

This is my another component with name 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);

Finally this is the component I want to see with the history push, named 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);

Answer 1

There are several parts that are incorrect. First of all, you shouldn't use BrowserRouter in Prueba.js. There should be only one BrowserRouter. Also, you either put Route inside BrowserRouter or Switch. As you didn't configure routes properly using BrowserRouter, Switch and Route, url changes but that doesn't reflect to your React App.