react中的Reach路由器不会在同一路径上使用urlParams重新呈现。

Question

我正在内部UI上创建一个单一页面应用程序。一个菜单出现在屏幕(CollectionsInventory)的左边，其中包含从API调用生成的Link，在右边，结果对象( Collection)显示在他的组件中。道具通过url-parameters传递。我还使用来自patternfly4的一个patternfly4组件来管理UI。看上去是这样的：

<Grid hasGutter>
  <GridItem span={3}>
    {data != null ?
      <CollectionsInventory collections={data[0].collections}/>
    :
      <React.Fragment>
        <Spinner />
      </React.Fragment>
    }
  </GridItem>
  <GridItem span={9}>
    <Router primary={false}>
      <React.Fragment path="/" />
      <Collection path="collection/:collectionName" />
    </Router>
  </GridItem>
</Grid>

问题是，我可以通过单击相应的链接或直接访问它(例如，如果用户希望访问他最喜欢的收藏的书签)来显示一个集合。但后来，的收藏被困在那里。每当我点击一个新的链接，没有什么改变。也许是因为它在同一条路上？有办法使链接触发器重新呈现吗？还是我没有使用正确的组件，因为带有链接的菜单在路由器之外？

在CollectionsInventory中，链接显示在表中，并由如下所示的集合名称生成：

const defaultRows = collectionList.map( collection => {
  const collectionLink=`collection/${encodeURI(collection.name)}`

  return {
    cells: [
      {
        title:
          <Link to={collectionLink}>
            {collection.name}
          </Link>,
        name: collection.name
      },
      collection.resourceType,
      collection.size
    ]
  }
});

Answer 1

问题是我的Collection组件在更新collectionName支柱时没有重新呈现。当我们更改道具时，反应组件就会重新呈现，但情况显然并非如此。因此，我在props.collectionName中添加了一个效果，以便每当apiFetch进程发生变化时重新启动它，而Voila！每当我选择一个新链接时，Collection组件就会更新。

好处是:确切地说，我使用的fetchApi方法是一个回调，每次修改props.collectionName时它都会被修改。以下是缩短版本：

const Collection = ({ collectionName }) => {
  const fetchData = useCallback(()=>{
    const apiPath = `/collection/${collectionName}`;
    /* do stuff to retrieve the data and set it in the state, or handle errors*/
  },[collectionName]);

  useEffect(()=>{
    fetchData();
  },[fetchData]);

  return(
   /*The actual content*/
  );
};