webpack-dev-server react-router4 嵌套路由404

Question

1、使用的是react-router官方的routerconfig例子：importReactfrom'react';importReactDomfrom'react-dom';import{BrowserRouterasRouter,Route,Link}from'react-router-dom'constMain=()=>MainconstSandwiches=()=>SandwichesconstTacos=({routes})=>(TacosBusCart{routes.map((route,i)=>())})constBus=()=>BusconstCart=()=>Cartconstroutes=[{path:'/sandwiches',component:Sandwiches},{path:'/tacos',component:Tacos,routes:[{path:'/tacos/bus',component:Bus},{path:'/tacos/cart',component:Cart}]}]constRouteWithSubRoutes=(route)=>((//passthesub-routesdowntokeepnesting)}/>)constRouteConfigExample=()=>(TacosSandwiches{routes.map((route,i)=>())})ReactDom.render(,document.getElementById('root'));2、webpack.config.js配置文件如下：varpath=require('path');module.exports={entry:{index:'./index.js'},output:{filename:'[name].bundle.js',path:path.resolve(__dirname,'/'),publicPath:'/',},module:{rules:[{test:/\.js[x]?$/,exclude:/(node_modules)/,use:[{loader:"babel-loader",options:{presets:["react","es2015","stage-0"],plugins:[]}}]},]},devServer:{contentBase:path.join(__dirname,'/'),compress:true,port:9000,watchContentBase:true,watchOptions:{poll:true},historyApiFallback:true,historyApiFallback:{//rewrites:[//{from:/^\/tacos/,to:'/index.html'},//],index:'/index.html',},proxy:{"/tacos/bus":{target:"http://localhost:9000",pathRewrite:{'^/tacos':'/'},}},}};3、问题如下：由于启用了historyApiFallback，路由/tacos和/sandwiches刷新页面没有问题，bundle.js文件的地址是http://localhost:9000/index.bundle.js。但是嵌套的路由/tacos/bus和/tacos/cart刷新页面之后仍然是404，并且加载bundle.js文件的地址变成了http://localhost:9000/tacos/index.bundle.js。试图用proxy去改写此地址但却无效。另外嵌套的路由/tacos/bus和/tacos/cart似乎并没有与/tacos和/sandwiches一样被作为一个BrowserHistory，不知道这个问题是react-router还是webpack-dev-server的问题？

Answer 1

index.html中引入js文件路径的问题，相对于网站的根路径引入，不要用相对路径引入。
//不要写这个路径，不要写这个路径，不要写这个路径
//写这个路径，写这个路径，写这个路劲
                            

Answer 2

http://localhost:9000/是访问到你`http://localhost:9000/index.html。这样子如果服务器不做跳转配置的话，那你访问的/tacos/cart和/tacos/bus等于去访问了http://localhost:9000/tacos/下的东西。
使用HashRouter可以解决你的问题。缺点是对搜索引擎不友好。
具体使用方法你也可以参考我刚为redux-form整理的一片文章React-Redux技术栈——之redux-form详解，里面使用了history/createHashHistory作为history管理，有代码可以下载。
react-router改版到4.x之后变化挺大的，我正着手结合官方文档整理关于react-route一些实用的demo。