Question

我有一个带有按钮的NavBar组件，该按钮可以正确路由url更改，但是需要首先刷新页面以呈现视图，除此之外，所有其他路由都可以正常工作我的代码：

导航栏：

buyPolicy() {

        let obj = {
            Id: this.idNumber,
            Dob: this.dob,
            SerialNo: this.vehicleSeqNo,
            MobileNo: this.mobile,
            EmailId: this.email,
            RefID: this.vehicleId
        };

        let navigationExtras: NavigationExtras = {
            queryParams: { ...obj }
        };

        this.router.navigate(['https://google.co.in'], navigationExtras);
}

路线：


import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,Button,
  NavLink,
} from 'reactstrap';
import { LinkContainer } from "react-router-bootstrap";
import { BrowserRouter  } from 'react-router-dom';





export default class NavBar extends React.Component {

    this.state = {
      isOpen: false,
      searchText:"",
        };
  }
        async handleSearchInput(e){
        this.setState({searchText:e.target.value});
    }

      submitSearch = () => {

}

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
        <Navbar className='Nav' color="" dark  expand="md">


        <NavItem className="searchInput">
        <input
        form-control input-lg
         placeholder="Search for movies..."
         ref={input => this.search = input}
         onChange={this.handleSearchInput}/>
           </NavItem>


          <NavItem>
          <BrowserRouter>

          <LinkContainer  to={{
            pathname:'/search',
            search: `${this.state.searchText}`,
            state: { searchText: this.state.searchText }}}>

           <Button  color="danger" size="lg"  navbar-btn >Search
           </Button>
           </LinkContainer>
           </BrowserRouter>

              </NavItem>

            </Nav>
          </Collapse>
        </Navbar>
    );
  }
}

单击按钮后的路线发生了变化，但是我需要单击“刷新”以渲染组件，如何解决此问题？

React Router更改url但不更改视图，需要刷新以呈现组件

0 个答案: