bugfix> single-page-application > 投稿

私は今、これに対する解決策を1ヶ月以上探しています。

を使用して個人用ランディングページを作成しました parcel-bundler そして preact 。私も使用しています preact-router ルーティングを処理します。

以下にコードを示します。

メインアプリコンポーネント
class App extends Component {
  render(props) {
    return (
      <div id='main'>
      {/* Components outside of router persist
      throughout all pages */}
        <Header />
        <Nav tabs={tabs} />
        <Router>
          <About  default path='/about'   />
          <Skills path='/skills'  />
          <Books  path='/books'   />
        </Router>
      </div>
    )
  }
}

ナビゲーションコンポーネント
const Nav = ({ tabs }) => 
  <nav>
    {tabs.map(t => (
        <p>
          <Link activeClassName='active' href={ t.path }>{ t.title.toUpperCase() }</Link>
        </p>
      ))}
  </nav>

tabs.json
[
  {
    "title": "About",
    "path": "/about" 
  },
  {
    "title": "Skills",
    "path": "/skills" 
  },
  {
    "title": "Books",
    "path": "/books"
  }
]


そのため、パーセルのサーバーを使用してページをライブで実行すると、すべてが期待どおりに機能します。タブをクリックすると、それぞれのページ/コンポーネントがレンダリングされます。

しかしながらparcel build blah blah を実行するたびに 、私の index.html を開くタブをクリックすると、次のようになりますhttps://i.imgur.com/71ogrFA.png (タブをクリックしたときのブラウザーウィンドウのスクリーンショット)、ブラウザーのURLバーが file:///C:/{route_name} に変わります 。

パーセルのライブサーバーでページを実行したときにページが機能する理由と、ビルド後に機能しない理由を理解しようとしています。ビルド後、タブをクリックすると、ブラウザがファイルシステム内のページを検索するように見えますか?その場合ですか?最終的に、どうすればこれを修正できますか?

回答 1 件
  • URLの先頭にスラッシュを付けると、絶対的にルートになります。

    サイトがHTTP経由で転送される場合、ルートはドメインです: <a href="/bar">  URL http://example.com/foo/bar を持つサイトに配置された   http://example.com/bar を指す 。

    ただし、ブラウザーでPCからファイルを開くときに使用されるファイルプロトコルの場合、ルートは現在のドライブのルートフォルダーで、通常は C: 。したがって、同じファイルを file:///C:/some/path/foo/bar でローカルに開いた場合 、リンクは file:///C:/bar を指します 。

    最も重要なことは、これはこのエラーがローカル開発中にのみ存在することを意味します。サイトが実際のサーバーでホストされると発生しません。

    XAMPPやMAMPなどのツールを使用してローカルHTTPサーバーを実行し、展開前にリンクが機能することを確認できます。

    パーセル開発サーバーはローカルHTTPサーバーも実行しているため、そこでリンクは正常に機能します。

あなたの答え