javascript - React Router & Link：它不尊重搜索参数（或者我认为）

问题描述

我正在创建自己的迷你博客，并正在实现搜索功能。

我使用 Strapi，一个无头 CMS。因此，如果我想搜索特定的帖子，我可以添加一个?_q=search hereAPI 调用来查询这些帖子。

在我的 React 应用程序中，我有一个Posts组件可以将页面中的 URL 转发到 API，这可以通过window.location.pathname + window.location.search. 因此，如果有人去，https://exampleblog.com/posts?_q=search here那么 React 将获取路径名和搜索参数，并将其用于对 Strapi 的 API 调用。我这样做是因为它可以节省很多工作。

使用我的搜索功能，我使用一个Link组件react-router-dom作为搜索按钮。有状态从文本框中获取值，并更改组件中to属性的值，使其看起来像. 并且由于页面中的路径名和搜索参数被转发到 API，它应该解析正确的帖子。Linkto/posts?_q=textbox value

我的问题是，如果 URL 中的路径名发生变化（例如/posts变为类似的内容/categories），则Link组件会呈现页面（这是正确的）。但是，如果仅search参数更改（?_q=search hereURL 中的），则浏览器中的 URL 会更改，但不会呈现任何新内容。

我还想补充一点，当从具有不同路径名的页面搜索时，搜索 100% 有效，因此搜索参数是有效的。但是，如果我在具有相同路径名的页面上执行搜索，则不会。

根据我的观察，我得出的结论是该Link组件不尊重 URL 中搜索参数的更改。

下面是一些示例代码。

Posts来自组件的片段：

const pathname = window.location.pathname + window.location.search;
const {loading, error, data} = useApi(pathname); // Custom hook to resolve API requests. Already knows the hostname.
// Continued code in this component will render the API result

整个Search组件：

import React, {useState} from 'react';
import {Link} from 'react-router-dom';

export default function Search() {
    const [query, setQuery] = useState('');

    return (
        <div className="search">
            <label>Search</label>
            <input type="text" onChange={event => setQuery(event.target.value)}></input>
            <Link to={`/posts?_q=${query}`} className="button">
                Search
            </Link>
        </div>
    );
}

我的“useApi”自定义钩子：

export default function useApi(endpoint = '/') {
    const URI = process.env.URI;

    const [state, setState] = useState({
        loading: true,
        error: false,
        data: null
    });

    useEffect(() => {
        (async () => {
            try {
                const response = await axios.get(URI + endpoint);
                const data = response.data;

                setState({
                    loading: false,
                    error: false,
                    data
                });
            } catch (error) {
                setState({
                    loading: false,
                    error: true,
                    data: null
                });
            }
        })();
    }, [endpoint]);

    return state;
}

如您所见，提供给 useApi 钩子的端点参数最终将是window.location.pathname + window.location.search，这意味着它将跟踪必要的更改，包括搜索参数的更改值。

像往常一样，任何帮助将不胜感激。

标签： javascriptreactjshyperlinkreact-router-dom

javascript - React Router & Link：它不尊重搜索参数（或者我认为）

问题描述

解决方案

推荐阅读