如何解决使用 React Router 的 Azure 静态应用路由配置
我正在尝试在 azure 上配置静态应用程序,但正在努力正确路由。当我导航到应用程序中的 /lti/login/
时,它工作正常。但是如果我刷新它会抛出一个 404,它告诉我我的 routes.json
没有正确设置(也许)。我希望有人能对此有所启发。
routes.json
{
"routes": [
{
"route": "/","serve":"/"
},{
"route": "/lti/login/*","serve":"/lti/login"
}
]
}
App.js
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/lti/login/">About</Link>
</li>
</ul>
<hr />
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route exact path="/">
<Form />
</Route>
<Route path="/lti/login/*"> <----- If I navigate to this within the app and then refresh it throws a 404.
<About />
</Route>
</Switch>
</div>
</Router>
解决方法
对于 react,你需要它来提供 index.html 文件。
这是一个示例 routes.json
配置:
{
"routes": [
{
"route": "/*","serve": "/index.html","statusCode": 200
}
],"platformErrorOverrides": [
{ "errorType": "NotFound","serve": "/404" },{
"errorType": "Unauthenticated","statusCode": "302","serve": "/login"
}
],"mimeTypes": {
"json": "application/json"
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。