如何使用動態路由傳遞信息/反應

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 ，這使得創建動態路由變得非常容易。

在這里編寫整個代碼有點困難，因此 我找到了一個很好的例子，說明了用你的代碼實現 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>
  );
}