我刚开始学习一个月。我构建了一个React应用程序,该应用程序托管在Firebase上,并使用API和Cloud的云功能。 我遇到的问题是,当我发布我的React应用程序时,当我尝试通过手动键入URL浏览应用程序时,URL将返回404,并且如果我刷新子页面之一中的页面,它也会返回404。仅当我从索引页面导航时,路由才起作用。
我已经做过一些研究,大多数建议是创建服务器端路由。是否可以不使用SSR来实现我的目标?是因为我做过或未做过的路由配置引起了此问题?仅供参考,它在本地运行时有效。 因为我的路由设计得不太好,所以路由有点乱。
App.jsx
function App() {
return (
<div className="App">
<Switch>
<Route path="/invitation" exact component={Home} />
<Route path="/" component={DashBoard} />
</Switch>
</div>
);
}
在Dashboard组件内部,我有子路由。
render() {
return (
<div className="container">
<div className="mask" />
<NavBar user={this.state.user} logOut={this.logOut} />
<div className="container-body">
<Switch>
<Route
path="/schedule"
exact
component={Schedule}
user={this.state.user}
/>
<Route
path="/betting"
exact
component={Betting}
props={this.state}
/>
<Route path="/login" exact component={Login} props={this.state} />
<Route
path="/register"
exact
component={Register}
props={this.state}
/>
<Route path="/teams" exact component={Teams} props={this.state} />
<Route path="/addteam" component={AddTeam} props={this.state} />
<Route path="/teams/:id" component={TeamPage} props={this.state}
/>
<Route
path="/administrator"
component={Administrator}
props={this.state}
/>
<Route
path="/unauthorized"
exact
component={Page403}
props={this.state}
/>
<Route
path="/notfound"
exact
component={Page404}
props={this.state}
/>
</Switch>
</div>
</div>
);
}
firebase.json
{
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
},
"hosting": {
"public": "built",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
所以这基本上是我对路由所做的。我没有为路由配置做任何其他事情。我的路由设置有什么问题吗?以及发布后返回404页面时如何解决路由问题。
答案 0 :(得分:0)
这就是您的firebase.json
的外观,这样,所有路由都将被重定向到您的React应用ìndex.html
,并从那里通过应用路由器控制路由。
"hosting": {
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
有关重写的Firebase官方文档: https://firebase.google.com/docs/hosting/full-config#rewrites
答案 1 :(得分:0)
您需要像这样将路由包装在路由器中。
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
<Router> // this is required
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Home} />
<Redirect to="/" />
</Switch>
</Router> // this is required