Реакция вложенного маршрута не загружается при обновлении

Question

У меня есть приложение React с навигацией, основанная на react-router, которую я запускаю в разработке с помощью webpack-dev-server и включен параметр предыстории истории. Вот маршруты я, определенные в моем index.js

ReactDOM.render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRedirect to="/intro" /> 
     <Route path="/intro" component={Intro} /> 
     <Route path="/device" component={Device} /> 
     <Route path="/clothing" component={Clothing} /> 
     <Route path="/build" component={Build}> 
     <IndexRedirect to="/build/pattern" /> 
     <Route path="/build/pattern" component={Pattern} /> 
     <Route path="/build/layout" component={Layout} /> 
     <Route path="/build/color" component={Color} /> 
     </Route> 
     <Route path="/capture" component={Capture} /> 
     <Route path="/review" component={Review} /> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

Когда я перемещаться по ссылкам, все работает отлично, и я могу видеть вложенные компоненты маршрута гнездования в пределах их компонентов родительского маршрута, как и ожидалось. Например, когда я перехожу к /build/color, я вижу, что мой компонент App вложен в компонент Build, вставляющий компонент Color.

Если это не удается, я пытаюсь нажать кнопку обновления внутри вложенного маршрута. Реагировать полностью не загружается, и я получаю следующую ошибку

GET http://localhost:8080/build/app.js 404 (Не найдено)

Существует действительно не такой файл в моем приложении, но я до сих пор путают, почему это автоматически ищет этот файл вместо перезагрузки маршрута из корня. Обратите внимание, что обновление обновления на страницах, таких как /device, работает без проблем.

Дайте мне знать, если вам нужна дополнительная информация о моей настройке. Спасибо!

---

Решение:

Моя webpack установка на самом деле использует HtmlWebpackPlugin, который был инъекционный путь к моей приложения пачке следующим

<script src="app.js" type="text/javascript"></script>

Все, что мне нужно было сделать, чтобы настроить мой webpack общественный путь как publicPath: '/', так что пучок будет впрыскиваться следующим образом:

<script src="/app.js" type="text/javascript"></script>

Answer 1

Это не работает, потому что он не может загрузить яваскрипт свертка. Я предполагаю, что проблема связана с вашим путем в теге скрипта в HTML. Возможно, вы указали путь к app.js с точкой в ​​начале как этот <script src="./app.js"></script>, если это так, пожалуйста, удалите точку и проверить, если проблема все еще существует <script src="/app.js"></script>

Проиллюстрируем чем разница между ./app.js и /app.js

Случай 1. Вы загружаете страницу с помощью первого уровня маршрутов как / или /intro

• ./app.js: HTML пытается загрузить скрипт из http://address/app.js
• /app.js: HTML пытается не загружать скрипт из http://address/app.js

никакой разницы

случае 2.Вы загружаете страницу с помощью второго уровня маршрутов /build/pattern

• ./app.js: HTML пытается загрузить скрипт из http://address/build/app.js - не существует
• /app.js: HTML пытается загрузить скрипт из http://address/app.js - OK