内部 UI で単一ページ アプリケーションを作成しています。画面の左側にメニューが表示され ( CollectionsInventory
)、Link
API 呼び出しから生成された が含まれ、右側に結果のオブジェクト (a Collection
) がコンポーネントに表示されます。prop は を介して渡されますurl-parameters
。Grid
また、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
]
}
});