Question

import copy # Generator function def mergedicts(*arr_dicts): for d in arr_dicts: # Do dict manipulation with custom logic here region_name = d['Region'] tmpdict = { region_name: copy.deepcopy(d) } # also deep copy if original dict should be intact. del tmpdict[region_name]['Region'] yield tmpdict values = list( mergedicts(mydict1, mydict2) ) print(values) # OR for item in mergedicts(mydict1, mydict2): print(item)返回已过滤的ButtonList列表，每个列表应链接到新页面。我想通过添加动态路由来做到这一点，但我不知道如何编写代码...如何正确使用history.push？任何帮助将不胜感激。

Buttons

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>
  );
}

Answer 1

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

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

示例

ProcessId,CommandLine

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

1 个答案: