前端是react写的
后台是springboot
使用的是BrowserRouter
路由index.js
import React,{Component} from "react";
import {Switch,Route} from "react-router-dom";
import Index from "../view/index";
import Home from "../view/list/index";
import DetailIndex from "../view/detail/index";
import CartIndex from "../view/cartList/index";
import AddressIndex from "../view/address/index";
import CartConfirmIndex from "../view/confirm/index";
import PrintIndex from "../view/print/index";
import CartHistory from "../view/cartHistory/index";
import DetailCarthistory from "../view/detailCartHistory/index";
import UpdateCartHistory from "../view/updateCartHistory/index";
import ConfirmUpdateCartListHistory from "../view/confirmUpdateCartListHistory/index";
import EndUpdateCartListHistory from "../view/endUpdateCartListHistory/index";
class RouterIndex extends Component{
render(){
return(
<Switch>
<Route exact path = '/' component = {Index}/>
<Route path = '/list/:data' component = {Home}/>
<Route path = '/detail/:id' component = {DetailIndex}/>
<Route path = '/cartList/:id' component = {CartIndex}/>
<Route path = '/address/:id' component = {AddressIndex}/>
<Route path = '/cartConfirm/:data' component = {CartConfirmIndex}/>
<Route path = '/print/:id' component = {PrintIndex}/>
<Route path = '/cartHistory/:id' component = {CartHistory}/>
<Route path = '/detailCartHistory/:id' component = {DetailCarthistory}/>
<Route path = '/updateCartHistory/:id' component = {UpdateCartHistory}/>
<Route path = '/confirmUpdateCartListHistory/:data' component = {ConfirmUpdateCartListHistory}/>
<Route path = '/endUpdateCartListHistory/:id' component = {EndUpdateCartListHistory}/>
</Switch>
);
}
}
export default RouterIndex;
index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import RouterIndex from './router/index';
import MainHeader from './view/mainHeader';
export default class App extends Component{
render(){
return (
<div>
<MainHeader/>
<RouterIndex/>
</div>
)
}
}
package.json
"homepage":"/",
"proxy": "http://localhost:8080"
使用npm run build 生成的build文件夹的文件放到java项目 main/resouce/public里后，
启动项目，首页正常显示，一览正常显示（这些都是this.props.history.push跳转），但是通过Link和window.location.href的跳转就出现了404
网上搜了很多，
具体原因我也觉得就是下面的解释:
》》之所以你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。当你刷新时，你首先是访问的后台地址，然后返回的页面内加载了React代码，最后在浏览器内执行；也就是说如果这个时候报404，是因为你后台并没有针对这个路由给出返回HTML内容，也谈不上执行React Router了。解决办法就一条：如果你期望所有的路由都由React Router来定义，只有你的后台，无论任何路径，都返回index.html就好了。剩下的事情交给React Router。那么你要做的就是修改后台服务器，可以放在apache，也可以放在你的java路由内做一个通配路径处理。
但给出的解决方法不管用，
例如
1.换成hashrouter，这个我试了可以是可以，但是#这玩意项目是不能接受的。舍弃
2.nginx和express，我后台是springboot的，这个项目没有用其它web服务器的打算。不行
查了好久发现，复制过来，改个名字发帖的真是太多了。
想请教csdn里真正的才艺人，给出一个可行的解决方法。
感谢！！！
