Экспресс не маршрутизация файлов JavaScript, когда URL имеет несколько каталогов - PullRequest
Новая
       10

Экспресс не маршрутизация файлов JavaScript, когда URL имеет несколько каталогов

0 голосов
/ 23 января 2019

Я настраиваю серверную серверную часть в экспрессе для приложения React, которое использует React-Router v4. До сих пор я настроил Express так, чтобы любой запрос перенаправлялся в index.html, позволяя React Router выполнять остальную часть работы. Это работает для маршрутов '/beats', '/loops', '/kits' и т. Д. Проблема возникает, когда в URL имеется несколько каталогов, например, с URL-адресом '/beats/1/name-of-beat' (который анализируется как '/beats/:id/:name?' в реакции маршрутизатор).

Использование этого экспресс-кода: 

app.use(express.static(path.join(__dirname, '../frontend/build')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
});

Это перенаправит все запросы в / kit, / beats и тому подобное в index.html, и все источники <script> будут работать. Тем не менее, при попытке достичь '/beats/1/name', index.html обслуживается, но теги <script> также обслуживаются index.html, что приводит к загрузке index.html в браузере, но не к JavaScript.

Это происходит, если я добавляю в URL любые другие каталоги в дополнение к первому, поэтому '/beats/example' или '/beats/1/2/3', но не для '/example' (что будет правильно показывать 404, настроенный в реакции-маршрутизаторе).

Если это необходимо, вот код маршрутизатора: 

<Router>
    <div className="App">
        <Header />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/kits" component={Kits} />
            <Route exact path="/beats" component={Beats} />
            <Route path="/beats/:id/:beatName?" component={SoundPage} />
            <Route path="/loops" component={Loops} />
            <Route path="/contact" component={Contact} />
            <Route component={NoMatch} />
          </Switch>
    </div>
</Router>

Вот теги встроенного сценария index.html: 

<script src="./static/js/1.731b4af1.chunk.js"></script>
<script src="./static/js/main.498cadba.chunk.js"></script>

А вот и структура проекта: 

-frontend
  -build
    -static
    -index.html
  -src
  -public
-backend
  -server.js

1 Ответ

0 голосов
/ 23 января 2019

Короче говоря, ваши вложенные маршруты должны будут использовать свойство match. Ваши маршруты будут вложены в раскрывающуюся структуру, где каждый последующий Route будет включен в следующий соответствующий Component метод render. Посмотрите это видео, чтобы понять, что я имею в виду: Вложенные маршруты React Router V4

Альтернативой использованию динамических вложенных маршрутов может быть использование структуры параметров запроса, где /beats/:query будет /beat/find?id=12345&beatName="Example Beat", пример которой вы можете найти здесь: React Router V4 Параметры соответствия вложенных маршрутов недоступны на корневом уровне

Первый пример более распространен на форумах (например, Reddit), а второй - чаще на фронтах веб-магазинов (например, Amazon).

...