URLSearchParams выбрасывает пустой объект

Question

Сегодня я сталкиваюсь со странной вещью. Раньше я использовал URLSearchParams() для извлечения параметров поиска из URL. Однако сегодня в моем приложении React оно перестало работать, когда я использовал его следующим образом. Почему params здесь пустой объект? Любой полезный совет высоко ценится.

// url of the web page is **http://localhost:3000/reset-password/?token=sks-4e5r-sklks-io**

useEffect(() => {
    console.log(window.location.search) // output -> ?token=sks-4e5r-sklks-io
    const params = new URLSearchParams(window.location.search);
    console.log(params) // output -> {}
})

Answer 1

Используйте new URL() для включения search

Используйте URLSearchParams с get() для получения параметров

const url = new URL(window.location);
const params = new URLSearchParams(url.search);
params.get("token")

Вы можете попробовать это с помощью этого примера:

const App = () => {
  const url = new URL(
    "http://localhost:3000/reset-password/?token=sks-4e5r-sklks-io"
  );
  // const url = new URL(window.location);
  const params = new URLSearchParams(url.search);
  console.log(params.get("token"));
  return <div className="App"></div>
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>