Question

我已经使用react和firebase构建了测试应用程序，并将其部署到了Github Pages。在localhost上时，一切正常，但在出于某种原因进行部署时，默认页面（起始页面）不会在该页面上呈现组件。这是我的代码，它位于无状态功能组件App.js中。以防万一：（routes.LANDING =“ /”）。

<BrowserRouter>
    <React.Fragment>
     <Navigation />
     <Route exact path={routes.LANDING} component={Landing} />
     <Route exact path={routes.SIGN_UP} component={SignUp} />
     <Route exact path={routes.SIGN_IN} component={SignIn} />
     <Route exact path={routes.PASSWORD_FORGET} component={PasswordForget} />
     <Route exact path={routes.HOME} component={Home} />
     <Route exact path={routes.ACCOUNT} component={Account} />
     </React.Fragment>
   </BrowserRouter>

据我对React-router缺乏经验的了解，我的https://d-ivashchuk.github.io/firebaseApp/ 应渲染着陆组件。相反，我什么也没得到，否则所有链接和路由都按预期工作。

感谢您的帮助和建议！

Answer 1

问题似乎出在路由器的相对路径上。由于您的单页webapp托管在/ firebaseApp /上，因此加载https://d-ivashchuk.github.io/firebaseApp/将永远不会显示应该在'/'上显示的组件。您可以将其更改为“ / firebaseApp /”，但是它将破坏您的本地版本的应用程序。关于这个确切的问题，有一个create-react-app线程：

https://github.com/facebook/create-react-app/issues/1765

要使react-router呈现页面中具有'/'路径的页面开发模式，该组件的路线应利用环境变量，并且在部署到GH页面时看起来像这样<Route path={process.env.PUBLIC_URL + '/'}>。

对于记录Firebase，您可以使用自己的网站托管服务，该服务应与react-router一起使用。 https://firebase.google.com/docs/hosting/

React Router无法正确呈现起始页面组件

1 个答案: