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的{{1}}钩子。我的问题的功能代码如下所示。

React Router

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

1 个答案: