如何处理ReactJs + ExpressJs中超过1个位置路径(/fruits/apple)的回调URL路径?

vc9ivgsu  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(127)

所以我用ReactJS实现了Okta登录,它运行得非常好。但是,当我尝试托管我的ReactJS + ExpressJS时,由于URL路径为/login/callback,我无法再正确地呈现回调(据我所知,每条路线中的每个path总是只有一个单词,如/apple/orange,而不是两个单词,如/fruits/applefruits/orange
这里的问题是,我需要<Route path="/login/callback" component={LoginCallback} />来渲染/处理这里定义的LoginCallBack component,因为这个组件是库组件的一部分,它应该执行进一步的重定向。
由于代码不能处理登录/回调,组件没有呈现,我的网站只是停留在回调URL由OKTA。
React
App.js

Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
  <Switch>
    <Route
      exact
      path="/"
      component={Home}
    />
    <Route path="/login/callback" component={LoginCallback} />  {/* Notice the path in this route? */}
    <SecureRoute path="/profile" component={Profile} />
    <SecureRoute path="/message" component={message} />
    <SecureRoute path="/request" component={request} />
  </Switch>
</Security>
快速JS

Index.js

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, './build')));

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/build/index.html'));  
});

app.get("/", ((req, res) => {
    res.render("index.html");
}));
yhuiod9q

yhuiod9q1#

经过数小时的挖掘、研究、试验和错误......找到了解决方案。

TLDR

在index.html中追加base标记

<head>
  ...
  <base href="/mysub-application1"/>
  ...
</head>

详情

首先,归功于这个medium post
根据海报的解释,为什么需要base标签...
基本标记要求的原因是,当嵌套URL被定向到NodeJS以加载时,它将努力使用/mysub-application1/*作为匹配,并将尝试从所请求的路径加载index.html(例如,如果所请求的路径是mysub-application1/foo/bar,则静态资源将尝试从mysub-application1/foo/bar而不是mysub-application1解析,这导致404问题)。

相关问题