React - React router v6, how to redirect setting state

Question

I am doing a react app that brings some data when app is mounted, in a component I want to redirect the user to a url and also pass the state in order to render the data in the state, for this I saw that in v6 you can't use the this.props.history.push('/url') and instead you must create a service and decorate the export of the component you want to use the redirect so I did it like this:

withNavigateService.js

import { useNavigate } from "react-router-dom";

export const withNavigate = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    
    return (
      <Component
      {...props}
        navigate={navigate}
        />
    );
  };
  
  return Wrapper;
};

in the component from where I am trying to redirect I want to set as state the data fetched based on the input in a form and then redirect so the new state is the defined in the redirect and not the one that was defined the first time the app was mounted. this is the code I have to redirect

import { withNavigate } from '../../services/withNavigate';
.
.
.

    handleSubmit(event){
        event.preventDefault()

        // redirect to the component with the search criteria
        // the search criteria will be passed as query parameters
        var tipo  = this.state.tipo
        var marca = toTitleCase(this.state.marca)
        var linea = this.state.linea
        axios.get(baseUrl+'products' + '/?tipo=' + tipo + '&marca=' + marca + '&linea=' + linea )
        .then((response) => {
            
            // this is my try to redirect with the new state but when the new page is loaded                // the data that is rendered is the one that was first defined when the app was mounted and //not the new state defined here
            this.props.navigate("/store",{
                state:{
                    product:response.data
                }
            });
        })
        .catch((error) => {
            console.log(error)
        })
    
    }
.
.
.
export default withNavigate(Finder);

but when the redirected page is loaded I saw the data rendered with the state defined the first time the app was mounted and not the defined in the redirect.

how can i achieve my objective i.e set the state in the redirect?

Edit: the component from where I am redirecting is a class component and turn this to a functional one would cost me as the logic works better in a class component rather in a functional one

React - React router v6, how to redirect setting state

0 Answers0