Preact and Parcel - проблема маршрутизации после комплектации - PullRequest
Новая
       10

Preact and Parcel - проблема маршрутизации после комплектации

0 голосов
/ 25 мая 2018

Я искал решение этой проблемы уже более месяца.

Я создал персональную целевую страницу, используя 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>
    )
  }
}

Nav Component 

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 Ответ

0 голосов
/ 29 мая 2018

Начальная косая черта в URL делает их абсолютными по отношению к корню.

Если сайт транспортируется по HTTP, корнем является домен: <a href="/bar">, размещенный на сайте с URL-адресом http://example.com/foo/bar, будет указыватьto http://example.com/bar.

Однако, в случае файлового протокола, который используется при открытии файла с вашего ПК в браузере, корневая папка является корневой папкой текущего диска, обычно C:.Поэтому, если вы открываете тот же файл локально на file:///C:/some/path/foo/bar, ссылка будет указывать на file:///C:/bar.

Самое главное, это означает, что эта ошибка присутствует только во время локальной разработки.Это не произойдет, если ваш сайт размещен на реальном сервере.

Вы можете запустить локальный HTTP-сервер с такими инструментами, как XAMPP или MAMP, чтобы убедиться, что ссылки работают до развертывания.

на сервере разработки посылок также работает локальный HTTP-сервер, поэтому ссылки там работают нормально.

...