主要应用程序组件

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的服务器实时运行页面时，一切都按预期工作：我单击一个选项卡，相应的页面/组件将被渲染。

但是，每当我运行parcel build blah blah时，打开我的index.html并点击任意标签，我会得到以下https://i.imgur.com/71ogrFA.png（浏览器窗口的屏幕截图，当我单击选项卡），浏览器的URL栏将更改为file:///C:/{route_name}。

我试图理解为什么当我在parcel的实时服务器上运行它时我的页面工作，以及为什么它在构建后不起作用？看起来，在构建之后，单击任何选项卡会导致浏览器在文件系统中搜索页面？那是这样的吗？最终，我该如何解决这个问题？

Answer 1

URL中的前导斜杠使它们对根来说是绝对的。

如果网站是通过HTTP传输的，则根目录为：<a href="/bar">放置在网址http://example.com/foo/bar指向http://example.com/bar的网站上。

但是，如果在浏览器中从PC打开文件时使用的文件协议，则根目录是当前驱动器的根文件夹，通常为C:。因此，如果您在file:///C:/some/path/foo/bar上本地打开了相同的文件，该链接将指向file:///C:/bar。

最重要的是，这意味着此错误仅在本地开发期间出现。一旦您的网站托管在实际的服务器上，它就不会发生。

您可以使用XAMPP或MAMP等工具运行本地HTTP服务器，以确保链接在部署之前有效。

parcel开发服务器也运行本地HTTP服务器，这就是链接在那里工作正常的原因。

捆绑

主要应用程序组件

导航组件

tabs.json

1 个答案: