【react】直接访问url报错，显示：cannot GET /URL

背景

今天在开发的时候发现直接访问 “/requestRecords/:id” 会显示 “cannot GET /URL” 错误，但是如果先访问 “/requestRecords” 页面再点击某条记录通过Link组件进入 “/requestRecords/:id”就能成功，不过刷新后还是报错。这其实也是客户端路由问题。

解决办法

1. 把路由组件 BrowserRouter 组件替换成 HashRouter 组件

   <HashRouter>
     <Route path="/requestRecords" component={Requests} />
     <Route path="/requestRecords/:id" component={RequestDetails} />
   </HashRouter>;
   

   但路由后面会自动添上#，https://myProject.co/requestRecords/132/#, 所以如果介意的，谨慎使用这个方法

2. 对于使用webpack-dev-server作为打包工具的项目，可以修改webpack的如下两个配置

   {
     publicPath: "/",
     historyApiFallback: true,
   }
   

   配置文件例子：

   var path = require('path');
   var HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './app/index.js',
     output: {
   	path: path.resolve(__dirname, 'dist'),
   	filename: 'index_bundle.js',
   	publicPath: '/'
     },
     module: {
   	rules: [
   	  { test: /\.(js)$/, use: 'babel-loader' },
   	  { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
   	]
     },
     devServer: {
   	historyApiFallback: true,
     },
     plugins: [
   	new HtmlWebpackPlugin({
   	  template: 'app/index.html'
   	})
     ]
   };
   

3. 对于使用express/nginx等前端服务器的项目，最好的办法就是把所有的请求都重定向到/index.html
   Express

   app.get('/*', function(req, res) {
     res.sendFile(path.join(__dirname, '/path/to/your/index.html'), function(err) {
   	if (err) {
   	  res.status(500).send(err)
   	}
     })
   })
   

   Nginx.conf

   location / {
     if (!-e $request_filename){
   	rewrite ^(.*)$ /index.html break;
     }
   }