我是 React 的新手。我创建了一个嵌套路由，它可以在不同设备上的本地完美运行。但是，当我将其部署在GCP nginx服务器上时，如果我直接访问该路径，嵌套路由似乎已被忽略。相比之下，当路径被按钮按下时，它似乎工作得很好，我不明白。
我有一条路线.js
<Router history={history}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/admin" component={Admin} />
<ProtectedRoute path="/message" component={Message} />
<Route path="/profile" component={Profile} />
<Route path="*" component={() => <h1 style={{ textAlign: "center" }}>404 NOT FOUND</h1>} />
</Switch>
</Router>
/profile，我有嵌套的路由
const { path, url } = this.props.match;
...codes between...
<Switch>
<Route path={`${url}/seller`} component={SellerProfile} />
<ProtectedRoute path={`${url}/user`} component={UserProfile} />
<Route path={`${url}/motto`} component={mottoProfile} />
<Route path={`${url}*`} component={() => <h1 style={{ textAlign: "center" }}>404 NOT FOUND</h1>} />
</Switch>
同样，在本地，所有组件都已正确呈现。但是，当部署在服务器上时，直接访问嵌套路由(即/profile/motto(将返回空白页。
尽管如此，当我使用history.push时，我能够访问那些嵌套的路由。例如，我在另一个组件中有一个函数，可以成功访问嵌套路由。
const onProfile = (e) => {
const cookies = new Cookies();
props.history.push({
pathname: "/profile/user",
state: { userid: this.state.userid },
});
}
请注意，profile/motto不需要状态，它不是唯一行为相同的嵌套路由。
在我的搜索过程中，我被带到了这里 - 这不是关于nginx的直接答案，而是在存储桶前面的GCP负载均衡器。发布，因为其他人可能正在寻找相同的内容。
以下是很好的背景信息：反应路由器在 AWS s3 存储桶中不起作用
对我有用的是使用/index 重写 url.html类似于转发上面的 404 错误解决方案。这工作干净并返回 200 个代码，但仅适用于 1 级，因此路径 "/"、"/users" 有效，但路径 = "/user/*" 并尝试 "/user/someuser" 不起作用。 这是网址映射：
yourmapname.yaml：
defaultService: https://www.googleapis.com/compute/v1/projects/yourprojectname/global/backendBuckets/yourbucketname
hostRules:
- hosts:
- yourhostname
pathMatcher: path-matcher-2
kind: compute#urlMap
name: yourmapname
pathMatchers:
- defaultService: https://www.googleapis.com/compute/v1/projects/yourprojectname/global/backendBuckets/yourbucketname
name: path-matcher-2
pathRules:
- paths:
- /
- /user
- /users
service: https://www.googleapis.com/compute/v1/projects/yourprojectname/global/backendBuckets/yourbucketname
routeAction:
urlRewrite:
pathPrefixRewrite: /index.html
cloud compute url-maps import yourmapname
--source ./gcp/yourmapname.yaml
--global
重写索引的相同原理.html在nginx中有效。