Having the following component:

import { ChangeEvent, useCallback, useState } from 'react';

export function SearchComponent() {
  const [searchValue, setSearchValue] = useState<string>('');
  const updateSearchValue = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(event.target.value);
  }, []);
  return (
    <div>
      <input value={searchValue} onChange={updateSearchValue} />
    </div>
  );
}

It updates that state value, searchValue with the value introduced in the input.

With that value, the URL is updated like this:

window.location.hash = searchValue ? `?searchBy=${searchValue}` : '';

It add an extra # to the URL, before it was example.com/test, now it is example.com/test#?searchBy=my_input but it's not a big issue.

What I want is to be able modify directly the input and store that new value in the component, so I've tried like this:

const queryParams = new URLSearchParams(window.location.search);
const searchBy = queryParams.get('searchBy');

When logged, queryParams is an empty object while searchBy is null.

Is there a way to store the value from the URL if the user is going to edit that value?

CodePudding user response：

Issue

The issue is that window.location.hash = searchValue ? `?searchBy=${searchValue}` : ''; updates the location hash, thus adding the "#" to the URL, and not the window.location.search, which is the queryString part of the URL.

Using window.location is also a bit of an anti-pattern as it mutates the location and forces a reload of the page. Better to use the tools available to you from react-router-dom to issue a navigation action instead of reloading the entire app.

Issue

Suggested Solution