在反应中直接访问组件时如何修复“404”错误

Question

我正在重做我的投资组合作为反应。所以对它来说相当新。我在这里面临的问题是，当我将 React 项目托管到服务器时，一切正常，使用路由，在导航时将页面移动到顶部等，但是我观察到当我关闭我的网站时选项卡并尝试直接访问组件。例如，如果我执行“ http://mywebsite.com ”，它就可以工作。但是，如果我执行“ http://mywebsite.com/contact ”，则页面会显示 404，是的，该组件确实存在。这两种方法都适用于本地主机，但不适用于托管服务器 (Hostinger)

我尝试在网上搜索，但找不到任何可靠的答案，StackOverflow 上的许多帖子都说它的服务器相关错误，但没有说明如何修复它。

手动刷新或写入时，React-router url 不起作用

访问 url 中的路由时如何修复 404 not found。(SPA 反应)

react-router-dom 在直接访问 URL 时生成 404，但不在开发中

这就是我的导航链接和路线的设置方式 -

class mainContent extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <nav id="navbar">
            <span>
              <NavLink exact to="/">
                PRASHANTH KUMAR SRIPATHI
              </NavLink>
            </span>

            <li-item>
              <NavLink to="/contact" id="nav-item" className="item">
                <i className="fa fa-comments-o" /> Contact
              </NavLink>
            </li-item>
            <li-item>
              <NavLink to="/resume" id="nav-item" className="item">
                <i className="book icon" /> Resume
              </NavLink>
            </li-item>
            <li-item>
              <NavLink to="/portfolio" id="nav-item" className="item">
                <i className="list alternate icon" /> Portfolio
              </NavLink>
            </li-item>
            <li-item>
              <NavLink exact to="/" id="nav-item" className="item">
                <i className="home icon" /> Home
              </NavLink>
            </li-item>

            {/*<li-item>
              <NavLink to="/about/" className="item">
                <i className="address card icon" /> About
              </NavLink>
            </li-item> */}
          </nav>

          <div className="content" id="main">
            <Switch>
              <Route exact path="/" component={home} />
              <Route path="/contact" component={contactMe} />
              <Route path="/resume" component={resume} />
              <Route path="/portfolio" component={portfolio} />
              {/*<Route path="/about" component={about} />*/}
            </Switch>
          </div>
          <div className="footer">
            <footer className="relative">
              &copy; 2019 - Prashanth Kumar Sripathi
            </footer>
          </div>
        </div>
      </Router>
    );
  }
}

我该如何解决这个问题，使其不显示 404。我不想以将其重定向到“ http://mywebsite.com ”的方式解决这个问题，因为如果我要构建另一个具有对应片段的网站我需要分享哪个只会将其重新路由到索引页面。

Answer 1

我不确定您是否仍然需要帮助，但我能够与我在 Hostinger 的一位朋友一起工作，这是您的 .htaccess 文件需要包含的内容。

完全复制和粘贴：

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Answer 2

TL;DR 这是服务器问题，而不是前端代码问题。

解答您对路线渲染404的担忧。

SPA 的设置方式是您在示例中使用 React Router 在前端代码中创建路由，并让该库满足您的路由需求。

当服务器请求针对特定页面（例如/contact服务器）时，服务器将尝试在目录中查找index.html（通常或等效，具体取决于您的服务器设置）contact，并且由于它没有找到任何此类路径或文件，因此将返回404。

解决方法是，您必须将所有请求发送/重定向到 SPA 的特定路由到主索引页面，然后让主应用程序（前端）在加载后处理它。

以下是相关的 React 文档，这正是您正在寻找的内容：https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

可能的解决方案取决于您的服务器设置，但概括而言：

对于 Node/Express 您可以使用以下代码

app.get('*', function (req, res) {
  res.send('index_path')
})

Netlify： https: //www.netlify.com/docs/redirects/

更多变体包括 Github Pages、Heroku、Firebase、PHP、Ruby on Rails、.Net、Flask 等，可以在这里找到：

• https://css-tricks.com/redirect-web-page/或
• https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

Answer 3

我无法发表评论，所以我必须回答。我不\xe2\x80\x99t 知道你是否输入错误，但在你的 contactme 组件的路由路径中被指定为联系人，因此你应该能够通过以下方式访问它

\n\n

http://mywebsite.com/contact

\n\n

代替

\n\n

http://mywebsite.com/contactme

\n