Question

我刚开始学习一个月。我构建了一个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页面时如何解决路由问题。

Answer 1

这就是您的firebase.json的外观，这样，所有路由都将被重定向到您的React应用ìndex.html，并从那里通过应用路由器控制路由。

"hosting": {
  "rewrites": [{
    "source": "**",
    "destination": "/index.html"
  }]
}

有关重写的Firebase官方文档： https://firebase.google.com/docs/hosting/full-config#rewrites

Answer 2

您需要像这样将路由包装在路由器中。

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

在Fire上托管React App时存在路由问题

2 个答案: