Я использую response-router-dom v5 и реагирую 16
Всякий раз, когда я перемещаюсь так:
от "/ products /: someId" к "/ products /: someOtherId "
URL изменяется, но компоненты не обновляются соответствующим образом
то же самое с запросами.
" / products? search = something "или" / products? search = someOtherThing "
it действительно работает , когда у меня другой URL-адрес, например« / »или« / users »,
Я использую Link для навигации, я также пробовал ловушку useHistory: history.pu sh, history.replace и withRouter (myComponent);
Вот как я получаю данные из запросов / параметров
async function searchProducts(searchValue) {
const response = await axios.post(
"http://localhost:8000/api/products/search",
{ search: searchValue });
return response.data.body;
}
const useFetchData = (query) => {
const [products, setProducts] = useState([]);
useEffect(() => {
if (products.length === 0) {
// Use searchProducts for the request
searchProducts(query).then((foundProducts) => {
setProducts(foundProducts);
});
}
}, [products, query]);
return products;
};
, затем я используюFetchData в моем компоненте, который идет:
const ProductList = () => {
const history = useHistory();
// parsing query to be -> { search: "value" }
const urlQuery = queryString.parse(history.location.search);
const products = useFetchData(urlQuery.search);
const getList = () => {
return products.map((product) => {
return (
<li key={product._id}>
<ProductItem product={product} />
</li>
);
});
};
return <div className="container">{getList()}</div>;
};
Кнопка поиска находится в другом компоненте заголовка, она всегда там, так как в макете
<button className="header-search-button" onClick={handleClick}>
Search
</button>
и handleClick:
// searchvalue has it's own onChange handler
const [searchValue, setSearchValue] = useState("");
// code...
const handleClick = () => {
// .... some code
// I also tried with push and Link
history.replace(`/products?search=${searchValue}`);
};