The baseUrl is not reflected in the URL generated by SearchBar.

[tetunori]

The baseUrl is not reflected in the URL generated by SearchBar.

🐛 Bug Report

When we input a word in the SearchBar, the page should transit to "Search results" page.
However, the URL of this page does not reflect the baseUrl setting.
For example, consider the case url='https://xyz.github.io', baseUrl='/test123/' and a search-target-word is apple.
I thinks expected generated URL should be 'https://xyz.github.io/test123/search?q=apple' but actual result is 'https://xyz.github.io/search?q=apple' so that we cannot access to "Search results" page from the Search bar.

Have you read the Contributing Guidelines on issues?

Yes!

To Reproduce

(Set baseUrl other than / beforehand.)

1. Input a word in the SearchBar and hit Enter key.
   The issue occurred.

Expected behavior

The generated URL should be <url> + <baseUrl> + 'search?q=<word>'.

Actual Behavior

The generated URL is wrong because the URL is <url> + '/search?q=<word>' and does not include baseUrl.

Your Environment

• Docusaurus version used: v2.0.0-alpha.56
• Environment name and version: Chrome 81.0.4044.138, Node.js v12.16.2
• Operating system and version: Windows 10 Home

Reproducible Demo

https://tetunori.github.io/p5.toio/
https://github.com/tetunori/p5.toio

Notes

I've just looked at the source codes for a moment and found that, at here, it seems this URL does not reflect baseURL.
So I think we need add/change the code like below and it worked fine in my environment.
Please confirm it.

import {useHistory, useLocation} from '@docusaurus/router';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; // Add

const SEARCH_PARAM_QUERY = 'q';

function useSearchQuery() {
  const history = useHistory();
  const location = useLocation();
  const {                         // Add
    siteConfig: {baseUrl} = {},   // Add
  } = useDocusaurusContext();     // Add

  return {
    searchValue:
      (ExecutionEnvironment.canUseDOM &&
        new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
      '',
    updateSearchPath: (searchValue) => {
      const searchParams = new URLSearchParams(location.search);

      if (searchValue) {
        searchParams.set(SEARCH_PARAM_QUERY, searchValue);
      } else {
        searchParams.delete(SEARCH_PARAM_QUERY);
      }

      history.replace({
        search: searchParams.toString(),
      });
    },
    navigateToSearchPage: (searchValue) => {
      // history.push(`/search?q=${searchValue}`); // <- 🐛?
      history.push(baseUrl+`search?q=${searchValue}`);  // Changed
    },
  };
}

export default useSearchQuery;