React router v5 useHistory.push goes without params-CodePudding

I'm using router-dom V5 and when i try to navigate to another page with some params it goes without the params. But when I click the back button on the browser, it shows the correct URL.

    let navigate = useHistory ();
    
    const handleChecked = async(e) => {
      let isChecked = e.target.checked;
      if(isChecked){
        seatSelected.push(e.target.name)
      } else {
        seatSelected = seatSelected.filter((name) => e.target.name !== name);
      }
      setChecked(!checked);
      console.log(seatSelected)
    }
    
    const proceedHandleClicked = () => {
        if(seatSelected.length > 0){
            navigate.push({
            pathname:'/eventbookingsummary',
            search: `?seats=${seatSelected}`,
            })
            seatSelected = []
        } else {
            alert('Please select seats')
        }
    }
    return(
   <Link style={{ textDecoration: 'none' }} onClick={proceedHandleClicke}>
                                    Proceed
                                </Link>
                            <div className='checkbox-container'>
                            <input id='T1' name='T1' type='checkbox'  onChange={(e) =>handleChecked(e)} 
                            className='table-seats'/>
                            <label htmlFor='T1' className='btn'>T1</label>
                            </div>
                            <div className='checkbox-container'>
                            <input id='T2' name='T2' type='checkbox'  onChange={(e) =>handleChecked(e)} 
                            className='table-seats'/>
                            <label htmlFor='T2' className='btn'>T2</label>
                            </div>
                            <div className='checkbox-container'>
                            <input id='T3' name='T3' type='checkbox'  onChange={(e) =>handleChecked(e)} 
                            className='table-seats'/>
                            <label htmlFor='T3' className='btn'>T3</label>
                            </div>
)

when proceedHandleClicked initially after back button clicked

CodePudding user response：

It seems the issue is that the Link component is missing the to prop, and the proceedHandleClicked doesn't prevent the default link action from occurring. Two navigation actions are issued. The first is the navigate.push then the link action. When you navigate back once you see the URL with the query params.

Add a to prop to the Link and consume the click event and prevent the default link action from occurring.

Example:

const proceedHandleClicked = (e) => {
  e.preventDefault();

  if (seatSelected.length > 0) {
    navigate.push({
      pathname: "/eventbookingsummary",
      search: `?seats=${seatSelected}`
    });
    seatSelected = [];
  } else {
    alert("Please select seats");
  }
};

...

<Link
  to="/eventbookingsummary"
  style={{ textDecoration: "none" }}
  onClick={proceedHandleClicked}
>
  Proceed
</Link>

CodePudding user response：

You can set your search param like this:

 navigate.push({
        pathname: '/eventbookingsummary',
        search: `?seats=${seatSelected.toString()}`, 
    })