React 路由器无法正确渲染起始页面组件答案

【问题标题】：React router does not render starting page component properlyReact 路由器无法正确渲染起始页面组件
【发布时间】：2018-12-13 06:22:53
【问题描述】：

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

<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/ 应渲染着陆组件。相反，我什么也没得到，否则所有链接和路线都按预期工作。

感谢您的帮助和建议！

【问题讨论】：

我对设置router 不是很熟悉；但是，如果没有提供路径，是否有一个 index 属性指定要使用的默认 Route？ <Route index />
好吧，据我所知，从技术上讲，没有默认路由。当在本地运行 localhost:3000/ 作为默认页面并呈现 {Landing/} 时，我希望 GitHub 页面具有相同的行为，但 ../firebaseApp/ 在这种情况下应该提供登陆组件，但它不起作用
您检查过控制台是否有错误？如果是这样，请在遇到任何情况时提供。如果您在 github 页面上公开托管应用程序，您还可以提供我相信的链接。
@DimitryIvashchuk 最后，听起来Landing 页面是您的索引页面。如果未指定页面，则索引页面是要转到的页面。 site/ 真正的意思是 site/index.html。 .html 可以替换为您正在使用的任何文件，例如，.php 用于 php 文件。
@MichaelSorensen 对不起，我的错，我提供了 github repo 的链接，而我以为我为 gh Pages 提供了它，会解决这个问题！

标签： javascript reactjs react-router

【解决方案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/

【讨论】：

嘿，迈克尔，您的 create-react-app 问题链接非常有帮助。您是否介意发布一个看起来像这样的明确答案：为了让 react-router 在开发模式下呈现具有“/”路径的页面，该组件的路由应利用环境变量，并且看起来像这样部署到 GH 页面时。谢谢！
当然，我自己没有尝试过，但是，假设它对您有用，我会根据您的建议编辑答案。
一切正常，但我使用 react-router-dom 中的使其在本地和部署时都可以工作。我基本上包含了上面注释中的代码和 env 变量和原始的 path='/' 并且它按预期工作！谢谢！