React Routerの同じコンポーネントの複数のパス名

3つの異なるルートに同じコンポーネントを使用しています。

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

それを組み合わせるためにとにかくありますか？

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

react-router v4.4.0-beta.4以降、およびv5.0.0で公式に、コンポーネントに解決されるパスの配列を指定できるようになりました。

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

配列の各パスは正規表現文字列です。

このアプローチのドキュメントはここにあります。

少なくともreact-router v4では、path正規表現文字列にすることができるため、次のようなことができます。

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

あなたが見ることができるようにそれは少し冗長なので、あなたのcomponent/ routeがこのように単純であるなら、それはおそらく価値がありません。

もちろん、これが実際に頻繁に発生する場合は、配列pathsパラメーターを.map受け取るラッピングコンポーネントを常に作成できます。これにより、正規表現またはロジックが再利用可能になります。

v4より前のバージョンのReact Routerを使用している場合はそうは思いません。

mapただし、他のJSXコンポーネントと同じように使用できます。

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

編集

path-to-regexpでサポートされている限り、react-router v4のパスに正規表現を使用することもできます。詳細については、@ Cameronの回答を参照してください。

その他のオプション：ルートプレフィックスを使用します。/pages例えば。あなたが得るでしょう

• /pages/home
• /pages/users
• /pages/widgets

そして、Homeコンポーネント内で詳細に解決します。

<Router>
  <Route path="/pages/" component={Home} />
</Router>

react-route-dom v5.1.2以降、以下のように複数のパスを渡すことができます

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

そして、当然のことながら、Home jsxファイルを上にインポートする必要があります。

React Routerのドキュメントによると、proptype 'path'は文字列型です。したがって、ルートコンポーネントに配列をpropsとして渡す方法はありません。

ルートを変更するだけの場合は、同じコンポーネントを別のルートに使用しても問題ありません。

react-router v4.4以降では、以下のようにすることができます。

パスを変数に保存し、下に渡し、 '|'を使用します オペレーター。

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} /> 

したがって、すべてのパスが一致component={Home}する場合は、必要に応じてレンダリングされます。