13

現在のページ/some/static/page. アプリケーションは<base href="/">すべて<head>のページにあり、それに依存しています。これは変更できません。

React 16、React Router 4、および の基本的な例を次に示し<HashRouter>ます。

export class App extends React.Component {
    render() {
        return (
            <HashRouter>
                <div>
                    <Route exact path="/" component={Root} />
                </div>
            </HashRouter>
        );
    }
}

テスト目的ですべてのルートを無効にすることができますが、これによって動作が変わることはありません。

ここcreate-react-appに問題を示すプロジェクトがあります。それを複製する手順は次のとおりです。

  • npm i
  • npm start
  • 案内するhttp://localhost:3000/some/static/page

HashRouter は明らかに の影響を受け<base>ます。または（IE 11でのみ意図したとおりに機能します）であると予想していますが、初期化時にリダイレクトし/some/static/pageます。/#//some/static/page#//some/static/page/#/

Rootコンポーネントが にリダイレクトされる前に、コンポーネントのクイック スプラッシュがあります/#/。

/foo/#/の場合はに、タグを外した場合は にリダイレクト<base href="/foo">します。/some/static/page/#/<base>

この問題は Chrome と Firefox (最近のバージョン) に影響しますが、Internet Explorer (IE 11) には影響しません。

<HashRouter>の影響を受けるのはなぜ<base>ですか? ここで使用されているのは、場所のパスに影響を与えることは想定されておらず、ハッシュのみに影響するためです。

これはどのように修正できますか？

4

5 に答える 5

2

HashRouterタグについてのあなたの観察<base>は正しいです。ここでブラウザーの違いに関する問題を提出しました: https://github.com/ReactTraining/history/issues/574および対応する PR と修正はこちら: https://github.com/ReactTraining/history/pull/577

それまでの間、必要なすべてのルーティングについてはわかりませんが、react アプリが完全に の下/some/static/page/にある場合は、おそらく次のように動作させることができます。

<BrowserRouter basename="/some/static/page">.

于 2018-03-29T08:08:14.570 に答える