リアクタルータv4：paramが404と競合しています

Question

私は現在、反応ルータの周りを頭で覆そうとしています。正しいタイトルとコンテンツをレンダリングするためにページ名：

<BrowserRouter> 
    <div> 
     <Switch> 
      <Route exact path="/" component={App} /> 
      <Route exact path="/:pageName" component={Page} /> 
      <Route component={NotFound}/> 
     </Switch> 
    </div> 
</BrowserRouter> 

アイデアは、ページコンポーネントが使用することです。現時点では私はこのようになりますルータを達成しようとしています。ただし、pageNameが存在しない場合は、notFound（404）ページを表示する必要があります。

現在、すべてのURLがページルートと一致するため、404ページはレンダリングされません。

pageNameが存在するかどうかを確認し、ページコンポーネントが存在する場合にのみ一致させる従来の方法は何ですか？私は動的に設定する必要がありますか、またはページコンポーネントがチェックしてリダイレクトする必要がありますか？これについてどう思いますか？

Answer 1

あなたはそのパラメータのページ名が事前定義された値の特定のセット内にある希望の場合、私はちょうど別のルートとしてこれらの値のそれぞれをリストします：

<BrowserRouter> 
    <div> 
     <Switch> 
      <Route exact path="/" component={App} /> 
      <Route exact path="/page1" component={Page} /> 
      <Route exact path="/page2" component={Page} /> 
      <Route exact path="/pagexyz" component={Page} /> 
      <Route path="*" component={NotFound}/> 
     </Switch> 
    </div> 
</BrowserRouter> 

あなたはすべてのページのためのちょうど1ルートを持って主張する場合、この記事ではyou can use regexp to specify pathによると、あなたはあなたが持っているページ名だけを受け入れ、他の人は拒否するregexpを書くことができます。

pageNames.map((name) => (<Route exact path={'/'+name} component={Page} />