From entry to abandoment 2020-10-26 10:15 采纳率: 0%
浏览 217

react 服务端路由配置

react前端的路由已经用BrowserRouter配置好了,3000端口运行也没问题,
npm run build 打包后放到java项目里,启动后,8080端口在首页后的跳转
出现404错误,网上搜了许多,说是后端没有配置路由,在8080跳转时会向服务器发送请求,后端没有配置,所以报404。
想问一下后端的路由我该怎么配置。
不用HashRouter,因为多个#。

springboot+react

https://blog.csdn.net/weixin_30781775/article/details/96107439

看了这个不知道可不可行,想试试,这段代码应该写在哪?没用过webpack,

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    //判断是主动导向404页面,还是传来的前端路由。
   //如果是前端路由则如下处理

    fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
        if(err){
            console.log(err);
            res.send('后台错误');
        } else {
            res.writeHead(200, {
                'Content-type': 'text/html',
                'Connection':'keep-alive'
            });
            res.end(data);
        }
    })
});

试着安装试了下结果就报错了
webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
}

错误内容

[webpack-cli] Compilation finished
assets by status 325 bytes [cached] 1 asset
./src/index.js 315 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
>   <BrowserRouter>
|     <App />
|   </BrowserRouter>,
  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 18:05
    关注

    参考GPT和自己的思路:

    针对您的问题我可以给出以下解答:

    1. Spring Boot + React 项目的前后端路由问题

    前端使用 React 的 BrowserRouter 路由,打包后放到 Java 项目中,启动后,访问 8080 端口出现 404 错误,这是因为在前端路由下,访问子路由(例如 /about)时,后端并不能识别这个路由,因此需要后端去配置路由。

    可以使用以下代码来配置:

    app.use(express.static(path.join(__dirname, 'public')));
    app.get('*', function(req, res) {
      res.sendFile(path.join(__dirname, 'public', 'index.html'));
    });
    

    这段代码要写在后端启动的 Node.js 服务器中。其中 path.join(__dirname, 'public') 是前端 build 后的静态文件所在的路径,app.get('*') 分别匹配了所有的路由,返回的是 index.html,这样就解决了路由问题。

    另外,在前端使用 BrowserRouter 路由时,需要在打包前配置 webpack,使用 output.publicPath 来指定 webpack 打包后静态资源的路径,如下所示:

    output: {
      path: path.join(__dirname, 'public'),
      publicPath: '/',
      filename: 'js/[name]_[chunkhash:10].js'
    }
    

    这个配置会将所有的静态资源(例如 css、js、图片等)的访问路径都指向根目录下,这样就可以让在后端中访问到前端的资源文件。

    1. 您尝试安装 webpack 的问题

    根据您的错误信息,可以看到 webpack 解析您的 src/index.js 时出现了问题,这是因为 webpack 在解析文件时,会根据文件后缀名来选择相应的 loader 来处理,而现在您的 webpack 配置中并没有配置解析 .js 后缀名的 loader,因此出现了错误。

    您可以通过修改 webpack 配置文件来解决:使用 babel-loader 来解析 .js 文件,这样您的 .js 文件中就可以使用 JSX 语法了。可以在 module.rules 中添加以下配置:

    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
    

    在添加这个配置后,您还需要安装相应的 babel 相关库,包括 @babel/core@babel/preset-env@babel/preset-reactbabel-loader 等,可以使用 npm 进行安装。

    希望这些答案能够对您有所帮助!

    评论

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名