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=()=>
Main
constSandwiches=()=>
Sandwiches
constTacos=({routes})=>(
Tacos
Bus
Cart
{routes.map((route,i)=>(
))}
)
constBus=()=>
Bus
constCart=()=>
Cart
constroutes=[
{
path:'/sandwiches',
component:Sandwiches
},
{
path:'/tacos',
component:Tacos,
routes:[
{
path:'/tacos/bus',
component:Bus
},
{
path:'/tacos/cart',
component:Cart
}
]
}
]
constRouteWithSubRoutes=(route)=>(
(
//passthesub-routesdowntokeepnesting
)}/>
)
constRouteConfigExample=()=>(
Tacos
Sandwiches
{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。