React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dKnightL/article/details/79282093

 有些开发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>






展开阅读全文

没有更多推荐了,返回首页