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

时间:2019-07-15 06:05:47

标签: reactjs ssr

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

2 个答案:

答案 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