問題タブ [react-router-v4]

複数の URL に対して同じ単一ページ アプリをレンダリングするサーバーがあります。

Aを「ホーム」ページとして機能させたい。したがって、「/」または「/A」へのブラウザ リクエストは、同じものを表示するはずです。

特に、ページ A と B へのリンクを作成し、A へのリンクを "/" と "/A" に対してアクティブとしてマークしたいと考えています。

だから私は次のようなものを使用しています:

"/" を "/A" の同義語にするにはどうすればよいですか? 私が試したこと：

• Route別のものを追加path="/": これにより、2 つのコンポーネントが表示されます
• のような正規表現を使用path="/(A)?": これは正しいコンポーネントを表示しますが、リンクはアクティブとしてマークされていません

代わりにサーバー側のリダイレクトとして実装する必要があります(同じページコンテンツを提供するのではなく、/リダイレクトするだけですか?)/A

私はreact-router 4を使用してサーバー側のレンダリングを試みています。ここで提供されている例に従っていますhttps://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together

サーバーの例に従って、使用する必要がありますStaticRouter。例に従ってインポートすると、StaticRouter が未定義として表示されます

オンラインでいくつかの調査を行った後、使用できることがわかりましreact-router-domた。これで、インポート ステートメントは次のようになります。

ただし、コードを実行するInvariant Violation: Browser history needs a DOMと、ブラウザーに表示されます。

私のserver.jsファイルコード

そして私の client/index.js コード

Update v1 私の例を最小限に減らしても、同じエラーが発生します。

clientIndex.js

serverIndex.js

App.js

私が何をしても、パスが「/」の場合は機能しますが、それ以外は何もありません。

パス「/」を作成するとどちらも機能しますが、他のルートを機能させることができず、「Cannot GET /test」というメッセージが表示されます。Create-react-appを使用するとルートを機能させることができるので、エラーはサーバーまたはwebpackに関係している可能性があると思いますが、私はかなり無知です.

サーバー側のコードで何か間違ったことをしている可能性があると思います

私のディレクトリ構造は

助けていただければ幸いです。

将来この問題が発生した場合は、次のコードをサーバー ファイルに追加することで問題を解決できました。