我有一个具有导航功能的React应用程序,该应用程序react-router在开发中运行,webpack-dev- server并且启用了历史记录后备选项。这是我在我的路线中定义的路线index.js
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组件中。
/build/color
App
Build
Color
失败的地方是当我尝试点击嵌套路由中的刷新按钮时。React完全无法加载,出现以下错误
GET http:// localhost:8080 / build / app.js 404(未找到)
我的应用程序中确实没有这样的文件,但是对于为什么它会自动查找此文件而不是从根目录重新加载路由,我仍然感到困惑。请注意,在类似页面上单击刷新/device确实可以正常工作。
/device
如果您需要有关我的设置的更多详细信息,请告诉我。谢谢!
解:
我的webpack设置实际上正在使用HtmlWebpackPlugin,它正在向我的应用程序包注入路径,如下所示
webpack
HtmlWebpackPlugin
<script src="app.js" type="text/javascript"></script>
我要做的就是将我的webpack公共路径配置publicPath: '/'为如下所示,以便将捆绑包注入
publicPath: '/'
<script src="/app.js" type="text/javascript"></script>
它无法正常工作,因为它无法加载您的JavaScript包。我猜测问题出在HTML的script标签中。可能您已像这样在开头用点指定了app.js的路径 <script src="./app.js"></script>,如果为true,请删除点并检查问题是否仍然存在<script src="/app.js"></script>
<script src="./app.js"></script>
<script src="/app.js"></script>
让我们说明一下./app.js和之间的区别/app.js
./app.js
/app.js
情况1。您正在使用诸如/或/intro
/
/intro
http://address/app.js
没有不同
情况2。您正在使用第二级路线加载页面 /build/pattern
/build/pattern
http://address/build/app.js