在 <select> <option> 中反应路由器链接

Question

在那里，我正在尝试使用select框中的React Router Link 过滤一些日期，其中包含 4 个options。当我options用路由器链接包装时，我看不到select框中的值（为空），有什么想法吗？

这是我到目前为止所拥有的。

import React from 'react';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 1fr;
  width: auto;
  height: 40px;
  margin: 10px 0;
`;

const LinkQuery = styled(Link)`
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px 1px #000000;
  color: ${props => props.theme.colors.primary};
`;

export const SelectBox = styled.select`
  grid-column: 2 / 3;
  height: 30px;
  padding: 10px;
  background-color: transparent;
  box-shadow: 2px 2px 2px #000000;
  border: 1px solid ${props => props.theme.colors.primary};
  border-radius: 5px;
  color: ${props => props.theme.colors.primary};
  font-size: 16px;
  outline: none;
  &:hover,
  &:focus {
    transition: 0.4s;
    border: 1px solid ${props => props.theme.colors.tertiary};
    transition: 0.2s;
  }
`;

export default function LocationFilter() {
  return (
    <Wrapper>
      <SelectBox>
        <LinkQuery to="/">
          <option>Select Location</option>
        </LinkQuery>
        <LinkQuery to="/?location=east">
          <option>East Building</option>
        </LinkQuery>
        <LinkQuery to="/?location=west">
          <option>West Building</option>
        </LinkQuery>
        <LinkQuery to="/?location=south">
          <option>South Building</option>
        </LinkQuery>
        <LinkQuery to="/?location=north">
          <option>North Building</option>
        </LinkQuery>
      </SelectBox>
    </Wrapper>
  );
}

Answer 1

我找到了解决我的问题的方法。我使用useHistory钩子从React Router. 我的问题的功能代码如下所示。

export default function LocationFilter() {
  let history = useHistory();

  function handleChange(value) {
    history.push(`/?location=${value}`);
  }

  return (
    <Wrapper>
      <SelectBox onChange={event => handleChange(event.target.value)}>
        <option>Select Location</option>
        <option value="east">East Building</option>
        <option value="west">West Building</option>
        <option value="south">South Building</option>
        <option value="north">North Building</option>
      </SelectBox>
    </Wrapper>
  );
}