目前,我在使用 React-router 的 BrowserHistory 和 nginx 代理转发请求时遇到问题。我读过以下答案:
React-router url 在刷新或手动写入时不起作用 https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually
看来我正在寻找的解决方案是一个包罗万象的解决方案,/*
将所有传入请求转发到index.html
.
如果 URL 是一层深,则此方法可以正常工作,即。/about
。但是,如果我尝试在子路线上刷新页面,/some/other/url
,页面完全破裂。
这是我当前的 nginx 配置(注意 http -> https 的永久重定向):
server {
listen 443 ssl;
server_name my.domain.io;
ssl_certificate /etc/letsencrypt/live/my.domain.io/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/my.domain.io/privkey.pem;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
#try_files $uri $uri/ /index.html;
try_files $uri $uri/ /index.html$is_args$args;
#try_files $uri /index.html;
#try_files $uri $uri/ /index.html?$args;
auth_basic "Restricted Content";
auth_basic_user_file /etc/nginx/.htpasswd;
}
location ~ /.well-known {
allow all;
}
}
server {
listen 80;
server_name my.domain.io;
return 301 https://$host$request_uri;
}
In the location /
阻止,你会注意到其他一些try_files
我曾试图开始工作,但无济于事。
这是什么react-router
逻辑看起来像:
<Route path="/user" component={ConnectedUserPage} />
<Route path="/user/preview/:locationId" component={ConnectedUserPage} />
<Route
path="/user/preview/:locationId/menu"
component={ConnectedUserPage}
fullMenuVisible={true}
/>
<Route
path="/user/preview/:locationId/menu/:sectionName/:someId"
component={ConnectedUserPage}
dishDetailsVisible={true}
/>
{/* Restaurant Profile */}
<Route
path="/location-profile/:profileId"
component={LocationProfile}
activeTabIndex={0}
/>
<Route
path="/location-profile/:profileId/gallery"
component={LocationProfile}
activeTabIndex={0}
/>
<Route
path="/location-profile/:profileId/gallery/:imageId"
component={LocationProfile}
activeTabIndex={0}
/>
<Route
path="/location-profile/:profileId/details"
component={LocationProfile}
activeTabIndex={1}
/>
<Route
path="/location-profile/:profileId/menu"
component={LocationProfile}
activeTabIndex={2}
/>
<Route
path="/location-profile/:profileId/comments"
component={LocationProfile}
activeTabIndex={3}
/>
<Route
path="/location-profile/:profileId/stuff"
component={LocationProfile}
activeTabIndex={4}
/>
<Route
path="/location-profile/:profileId/menu/:somethingName"
component={LocationProfile}
activeTabIndex={2}
/>
<Route
path="/location-profile/:profileId/menu/:somethingName/:someItemId"
component={LocationProfile}
activeTabIndex={2}
/>
.
.
.
.
任何帮助或指导表示赞赏。
我遇到了像你一样的类似问题,我的团队花了很多时间研究 nginx 和 React-router,这与你的设置非常相似。
我也有以下错误:
未捕获的语法错误:意外的标记
最后我找到了一个解决方案,实际上是在我的index.html服务器文件上。
我正在为我的包使用相对路径
<link href="styles.css" rel="stylesheet" />
<script src="bundle.js"></script>
路由之后,假设您尝试访问your/path/subdomain
,它会尝试获取bundle.js和styles.css文件your/path/subdomain/styles.css
and your/path/subdomain/bundle.js
,但它们是我项目的根源。
所以我的解决方案就是使用
<link href="/styles.css" rel="stylesheet" />
<script src="/bundle.js"></script>
这解决了这个问题。希望这对您有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)