有些开发er可能会想把做好的react项目,打包出来的静态文件丢到tomcat上测试,然后发现自己的路由怎么不生效了?? 页面不进行加载了。
第二个就是但是当我们刷新一下浏览器,或者打开一个不存在的页面的时候
- 路由不加载(都是路径惹的祸)
首先,看一下自己的本地路径是不是这个样子的: http://localhost:8888/home
然而丢到tomcat的webapp下,由于自己新建了文件夹(我的是叫react),路径变成了http://localhost:8080/react/home
多出的文件夹路径(react)就是罪魁祸首!
解决方式:在route组件的path添加你的文件夹名字就可以了
比如我用webpack开发的时候是这样子的(注意route组件的path就行)
<Route exact path="/" render={()=>
<Redirect to="/home"/>
// <Home dispatch={dispatch} getState={getState} questionList={value.question}></Home>
}/>
<Route path="/home" render={()=>{
return lazyLoad(Home, {
dispatch:dispatch,
getState:getState,
questionList:value.question
}
);
}}/>
<Route path="/detail" render={(props)=>{
return lazyLoad(Detail, {
pid:props.location.id,
questionList:value.question,
dispatch:dispatch,
answer:value.answer
}
);
}}/> 丢到tomcat修改成
<Route exact path="/react" render={()=>
<Redirect to="/react/home"/>
// <Home dispatch={dispatch} getState={getState} questionList={value.question}></Home>
}/>
<Route path="/react/home" render={()=>{
return lazyLoad(Home, {
dispatch:dispatch,
getState:getState,
questionList:value.question
}
);
}}/>
<Route path="/react/detail" render={(props)=>{
return lazyLoad(Detail, {
pid:props.location.id,
questionList:value.question,
dispatch:dispatch,
answer:value.answer
}
);
}}/>
- 页面刷新404
在WEB-INF文件夹的web.xml中添加下面代码就行了(没有文件夹和文件自己添加)
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>

本文介绍了解决React项目部署到Tomcat后遇到的路由失效和404问题的方法。一是调整路由配置以匹配实际部署路径;二是通过修改web.xml来处理页面刷新导致的404错误。
1363

被折叠的 条评论
为什么被折叠?



