react-router：一致するパスに基づいてコンポーネントを表示/非表示

Question

私は反応ルータv4を使用してv16に反応します。いくつかのコンポーネントは一度だけマウントされる（最初にレンダリングされる）が、ルーターのパスの一致に基づいてレンダリングされる必要があります。 （このような使用事例の1つは、メニュー項目のクリックに関するレポートを表示することです。後で呼び出すと、表示されたレポートを再度取得する必要はありません）。

スイッチを使用するか、または単純なRouteコンポーネントを使用します。コンポーネントは、そのコンポーネントがパスにないときに、アンマウントされます。

現在、私は（手で問題を解決している）このようにやっている：

<main> 
    <Route exact path="/" component={Home} /> 
    <WrapRoute exact path="/about" component={About} /> 
</main> 

const WrapRoute = ({path, ...rest}) => (
    <div style={{display: rest.location.pathname == path ? "block" : "none"}}> 
    <Route {...rest} /> 
    </div> 
) 

をしかし、私は直接location.pathnameを検証しないと思うことは良いアイデアです。私は 'Route'コンポーネントでこれを処理したいと思います。

このシナリオを処理する際に、（コンポーネントが再度マウントされないように）提案をお願いします。これに対処するための解決策または異なるパターンは、大歓迎です。

Answer 1

私はよく分かりませんが、良いパターンがあれば、これで解決できます。次のコードは、提供されているコードより優れています。

更新：

1はmatchPath関数を呼び出すことができますが、私はちょうど「子供」のパラメータを呼び出すことは、より良い選択肢であることに気づきました。

<Route exact path="/dc/:id" children={({ match, ...rest }) => (
    <div style={{display: match && match.params.id === id.toString() 
     ? "block" 
     : "none" 
    }}> 
     <Component {...rest} match={match} /> 
    </div> 
)} /> 

以前のソリューション：反応-ルータを正確に特定することができないから

matchPath機能 - このパスが一致したかどうかを取得するかどうか。

<main> 
    <Route exact path="/" component={Home} /> 
    <WrapRoute exact path="/about" component={About} /> 
</main> 

...... 

import { matchPath } from 'react-router' 

const WrapRoute = ({path, exact, ...rest}) => (
    <div style={{display: matchPath(rest.location.pathname, { path, exact }) 
    ? "block" 
    : "none" 
    }}> 
    <Route {...rest} /> 
    </div> 
)