Question

我在使用react-router和webpack-dev-server时遇到了一些问题，无法实现嵌套的url路由。

webpack.config.js

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: "/", <-- this enabled routing to /register/step2
    filename: "js/bundle.js",
},

routes.js

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/register/step2', component: SecondStep },
    ]
};

export default (<Router routes={routes} history={createBrowserHistory()} />);

在appliation中点击时，我可以进入/ register / step2但是一旦我在浏览器中点击刷新，我的common.js和bundle.js就丢失了：404，因为它试图加载所有内容来自/ register / directory。

有人可以帮忙吗？感谢。

Answer 1

I figured it out. 2 things that is needed to enable this.

webpack.config.js

Caused by: java.lang.ClassCastException:android.support.v7.widget.AppCompatButton cannot be cast to android.widget.ImageButton 

at com.example.dewewors.fitness.Activity_cal.onCreate(Activity_cal.java:31)

routes.js

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}

Answer 2

如果您使用hashHistory而不是createBrowserHistory（），它将阻止服务器请求您的服务器上的当前网址。

export default (<Router routes={routes} history={hashHistory} />);

使用react-router和webpack dev服务器的嵌套url路由

2 个答案: