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

我在使用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 /目录加载所有东西.

有人可以帮忙吗?谢谢.

我想到了.启用此功能所需的2件事.

webpack.config.js

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

routes.js

const routes = {
    childRoutes: [
        { path: '/',component: Register,childRoutes: [
            { path: 'step2',] },]
};

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...