如何使用动态路由传递信息/反应

Question

ButtonList 返回过滤后的Buttons 列表，每个链接到一个新页面。我想通过添加动态路由来做到这一点，但我不知道如何编写代码......我如何正确使用history.push？任何帮助将不胜感激。

export default function Home() {
  const [searchValue, setSearchValue] = useState("");
  const history = useHistory();

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchValue.toLowerCase())
  );

  function handleSearch(value) {
    setSearchValue(value);
  }

  const selectedItem = filteredData.find(item => item.name);

  function handleSelect(item) {
    history.push(`/home/${item.name}`);
  }

  return (
    <WrapperDiv>
      <StyledHeader />
      <Switch>
              
        <Route exact path="/home">
                
          <Searchbar onSearch={handleSearch} />
          <ButtonList data={filteredData} onClick={handleSelect} /> 
        </Route>
        <Route exact path="/home/{...}">
          <StyledDiv>
            <Button item={selectedItem} light />
            <AccordionList />
          </StyledDiv>
        </Route>
      </Switch>
    </WrapperDiv>
  );
}

export default function Button({ children, handleSelect }) {
  return (
    <button
      to={{
        pathname: "/home/" + data.name,
        data: data
      }}
      onClick={handleSelect}
    >
      {children}
    </button>
  );
}

export const data = [
  {
    name: "Apple",
    id: 1 
  },
  {
    name: "Banana",
    id: 2 
  },
  {
    name: "Blueberry",
    id: 3 
  }
];

Answer 1

实现它的一个好方法是使用React Router，这使得创建动态路由变得非常容易。

在这里编写整个代码有点困难，因此请使用您的代码I found a good example of an easy way to implement react-router。

示例

import { useHistory } from "react-router-dom";

function MyButton() {
  let history = useHistory();

  function triggerClick() {
    history.push("/somewhere");
  }

  return (
    <button type="button" onClick={triggerClick}>
      Go somewhere
    </button>
  );
}