所以我用ReactJS实现了Okta登录,它运行得非常好。但是,当我尝试托管我的ReactJS + ExpressJS时,由于URL路径为/login/callback
,我无法再正确地呈现回调(据我所知,每条路线中的每个path
总是只有一个单词,如/apple
、/orange
,而不是两个单词,如/fruits/apple
、fruits/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");
}));
1条答案
按热度按时间yhuiod9q1#
经过数小时的挖掘、研究、试验和错误......找到了解决方案。
TLDR
在index.html中追加
base
标记详情
首先,归功于这个medium post。
根据海报的解释,为什么需要
base
标签...基本标记要求的原因是,当嵌套URL被定向到NodeJS以加载时,它将努力使用
/mysub-application1/*
作为匹配,并将尝试从所请求的路径加载index.html(例如,如果所请求的路径是mysub-application1/foo/bar
,则静态资源将尝试从mysub-application1/foo/bar
而不是mysub-application1
解析,这导致404问题)。