从查询字符串回退中响应路由器匹配路径
我希望能够在Apache服务器上使用Reactive路由器提供一个React应用程序，而不必更改任何默认的Apache/NGINX吐露。问题是，只有当您访问根文件夹时，应用程序才会得到服务，因为任何子路径都会导致404 (app.com/ works，而不是app.com/设置)。
对于Apache服务器，我包含一个.htaccess文件，如果找不到所请求的资源，它将自动加载index.html。对于NGINX，据我所知，除非您更改配置文件，否则无法正确地将应用程序加载到子路径中。
我的解决方案是在应用程序中添加选项，将路由器路径存储为查询字符串，而不是在app.com/?page=settings中，而不是在location.pathname中，类似于app.com/settings.
是否有任何方法在React路由器中添加某种中间件，以便在访问app.com/?page=settings时将路由器路径设置为/settings。此外，当用户导航并且路由器应该更新地址栏中的URL时，它应该将其更改为app.com/?page=user/dashboard而不是app.com/user/dashboard.。
我正在寻找允许路由器使用路径和指定为查询字符串变量的路径的任何解决方案。
如果需要，下面是我的路由器的外观：
<Router history={browserHistory}>
<Route path={BaseRoutes.Home} exact>
<Redirect to={BaseRoutes.Domains} />
</Route>
<Route path={[BaseRoutes.Stats, BaseRoutes.Settings, '/*']} component={SidebarMain} />
<div className={`content-area ${classes.content}`}>
<Switch>
<Route exact path={BaseRoutes.Stats} component={Stats} />
<Route exact path={BaseRoutes.Home} component={Domains} />
<Route exact path={BaseRoutes.Settings} component={Settings} />
</Switch>
</div>
</Router>;回答 1
Stack Overflow用户
发布于 2022-11-22 02:12:35
算了，我意识到我可以用HashRouter代替Router .
因此，取决于用户设置的拥有“漂亮”URL还是基于哈希的URL，我可以加载BrowserHistory路由器或HashRouter：
<Router history={browserHistory}>或<HashRouter>
为了在他们之间切换，我做到了：
let SupportedRouter: React.ElementType = HashRouter;
if (MY_CONDITION) {
SupportedRouter = Router;
}
// Render
<SupportedRouter history={browserHistory}>
</SupportedRouter>我必须将它们转换为React.ElementType，否则传递历史记录会导致TypeScript错误：https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019
https://stackoverflow.com/questions/74526639
复制相似问题
腾讯云开发者
