在next.js中是否可以将移动和网络路由分开

Question

在经典的ReactJS方法中，我根据客户端的设备宽度来分隔路由。我现在想在Next.js中做。在我现有的项目中，我使用根组件在src / index.js文件中实现了

ReactDOM.render(
    <Provider store={store}>
        <Root/>
    </Provider>,
    document.getElementById("root")
);

这是根组件：

            <Suspense fallback={<Loading type="full" />}>
                <RootWeb />
            </Suspense>
        ) : (
            <Suspense fallback={<Loading type="full" />}>
                <RootMobile />
            </Suspense>
        );

这里是RootWeb组件（RootMobile几乎相同）：

const RootWeb = () => {
    return (
        <Router history={history}>
            <Suspense fallback={<Loading type={"full"} />}>
                <Switch>
                    {routes.map(({ path, Component, requireAuth }) => {
                        if (requireAuth) {
                            return <PrivateRoute path={path} key={path} component={Component} />;
                        } else {
                            return (
                                <Route
                                    key={path}
                                    exact
                                    path={path}
                                    render={() => <ErrorBoundary>{<Component />}</ErrorBoundary>}
                                />
                            );
                        }
                    })}
                    <Route render={() => <ErrorPage />} />
                </Switch>
            </Suspense>
        </Router>
    );
};