使用react-router-dom时，手动刷新URL地址加载资源失败解决方法

在练习react项目时，使用react-router-dom遇到的问题。

更新日志：

2020-04-03

1. 调整一些文字性描述说明；
2. 增加Node服务端处理静态前端文件html的部署问题；

问题描述：

1. 点击路由跳转到其他页面，然后手动刷新当前URL地址，显示空白页面，

   路由由http://localhost:8080/——>http://localhost:8080/topic/
   控制台错误打印：
   

2. 多入口访问其他页面，/主入口提供跳转页面时。需要单独访问/test时：

   	<Router>
   	    <Suspense fallback={<Spin tip="载入中..." />}>
   	        <Switch>
   	            <Route exact path="/" component={MainPage} />
   	            <Route path="/test" component={Test} />
   	        </Switch>
   	    </Suspense>  
   	</Router>
   	```
   

通过查询网上相关资料，得到了大致的解决问题的方向。

解决

  通过使用简易web服务webpack-dev-server，使用react-router-dom控制路由跳转。
资源参考：
webpack-dev-server
http-proxy-middleware

// 安装 http-proxy-middleware
npm install --save-dev http-proxy-middleware

// 在 webpack-config.js 中进行配置
const proxy = require("http-proxy-middleware");

module.exports = {
	/....../
	devServer:{
	    proxy:[{
	        context:['/topic'],         // 要代理的接口
	        target:"http://localhost:8080",
	        pathRewrite:{"^/topic":""}, // 处理转换
	  	}]
},
}

类似在接口访问中设置代理，将 /topic/路径定义为为/。

后记

还有一些其他可能在不同模式下出现的相关问题：

• 程序已部署到服务器，则需要在服务器(tomcat/ngnix)配置直接请求的API地址跳转路径。

• 程序使用了简易的web服务,比如webpack-dev-server，则可以进行webpack.config.js属性devServer配置

    devServer: {
        historyApiFallback: {
          rewrites: [
            { from: /^\/topic/, to: '/views/index.html' },
          ]
        }
      }
  

  针对直接访问.html方式请求资源。

2020-04-03 ⭐️⭐️⭐️
处理在node服务中部署前端编译后的项目文件。直接上图展示项目结构

说明：

1. npm run start 启动前端项目，指向“/src”下的前端项目。
2. npm run build编译前端项目，指定编译后的存放目录为/public。
3. npm run server启动后端项目。将前端编译后的静态文件作为模板引擎和静态资源路径

   // 静态指向资源目录，JS CSS等等 访问
   app.use(express.static('public'));
   // 模板引擎
   app.set('views',path.resolve(__dirname,'../public'));
   app.set('view engine','html');
   app.engine('html',require('ejs').__express);
   

   这样时，/public目录下的js/css/png等静态资源可以访问了，且作为模板殷勤的index.html也可作为路由去渲染了。

   // 主页访问视图
   app.get("/",function(req,res,next){
      res.render('index');
   });
   app.get('/test',function(req,res,next){
       res.render('index');
    });
   

tomcat 服务解决路由的方式一致，首先要讲编译后的静态文件作为静态资源可以通过服务访问到，然后在通过路由控制返回视图。

🔥🔥🔥 至此，此处的坑已经填完了，不出问题，改篇文章不会更新了。