I'm going to implement a product page where it contents similar products when I hit on similar product component it should open same screen component and keep previous product screen in navigation history.

Can anybody help me please?

productSlice.js

const productSlice = createSlice({
  name: "product",
  initialState: {
    product: null,
    loading: false,
  },
  reducers: {
    getProductStart: (state) => {
      state.loading = true;
    },
    getProductSuccess: (state, { payload }) => {
      state.product = payload;
      state.loading = false;
    },
    getProductFailure: (state, { payload }) => {
      state.loading = false;
    },
  },
});

const { actions, reducer } = productSlice;
export const productSelector = (state) => state.product;

export default reducer;

export function fetchProduct(id){
    return dispatch => {
        ...
    }
}

store.js

const reducers = combineReducers({
  product: productReducer,
});

const store = configureStore({
  reducer: reducers,
});

export default store;

ProductScreen.js

function ProductScreen({ navigation, route }) {
  const dispatch = useDispatch();
  const { product, loading } = useSelector(productSelector);

  useEffect(() => {
    dispatch(fetchProduct(route.params.id));
  });

  const openSimilarProduct = (id) => {
      navigation.push("ProductScreen", { id });
  }

  return (
    <View>
      <Text>{product.name}</Text>
      <Text>{product.description}</Text>

      <View>
          <Pressable onPress={() => openSimilarProduct(1)} >
            <Text>Product #1</Text>
          </Pressable>
      </View>
    </View>
  );
}

export default ProductScreen;