0

内部 UI で単一ページ アプリケーションを作成しています。画面の左側にメニューが表示され ( CollectionsInventory)、LinkAPI 呼び出しから生成された が含まれ、右側に結果のオブジェクト (a Collection) がコンポーネントに表示されます。prop は を介し​​て渡されますurl-parametersGridまた、UI を管理するために patternfly4のコンポーネントを使用しています。これは次のようになります。

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

1 に答える 1