当我重新加载页面时，useLocation 挂钩有错误

Question

我使用 useLocation 从 url 获取数据，第一次工作正常。但是当我重新加载页面时，位置的字符串搜索将包含编码字符串。

这就是 useLocation 钩子的作用吗？

首次加载 重新加载后

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, useHistory, useLocation } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const handleSearch = () => {
    history.push('/search?q=test 123'); 
  };

  return (
    <div>
      <button onClick={handleSearch}>Search "test 123"</button>
    </div>
  );
}

function SearchResults() {
  const location = useLocation();
  console.log(location);
  const search = location.search;
  const queryParams = new URLSearchParams(search);
  const query = queryParams.get('q');

  return (
    <div>
      <h2>Search Results</h2>
      <p>Displaying search results for: {query}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/search?q=react test">Search</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/search" component={SearchResults} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

我想知道这是怎么回事，为什么会这样。

Answer 1

如果您想使用带空格的值，则应该在传递查询参数之前对其进行编码，然后在读取搜索参数的组件中对其进行解码。

<Link to={`/search?q=${encodeURI("react test")}`}>
  Search
</Link>

const handleSearch = () => {
  history.push({
    pathname: "/search",
    serch: `?q=${encodeURI("test 123")}`

  }); 
};

function SearchResults() {
  const { search } = useLocation();

  const queryParams = new URLSearchParams(search);
  const query = decodeURI(queryParams.get('q') ?? "");

  return (
    <div>
      <h2>Search Results</h2>
      <p>Displaying search results for: {query}</p>
    </div>
  );
}