Question

const routes = [
    { component: Root,
        routes: [
            { path: '/',
                exact: true,
                component: Home
            },
            { path: '/child/:id',
                component: Child,
                routes: [
                    { path: '/child/:id/grand-child',
                        component: GrandChild
                    }
                ]
            }
        ]
    }
]

routes.config.js使用renderRoutes导出的react-router-config方法导出路由对象

当我启动应用程序并访问URL localhost:3000时，将呈现Home组件。

如果访问权限为localhost:3000/child，则请求为404。

如果访问localhost:3000/#/child，但它呈现Home组件而不是Child组件

在开发模式下，我知道可以添加devServer：{historyApiFallback：true}，但是我应该在生产模式下吗？

如果使用HashRouter，效果很好。

那我该如何使用BrowserRouter？

Answer 1

尝试一下：

Step 1: Wrap your <App /> inside <BrowserRouter />

Step 2: <Router path="/child" component={Child} />

Step 3: Point this router using <Link to="/CHILD>Child</Link>"

我如何在react-router v4中使用BrowserRouter代替HashRouter

1 个答案: