Question

我正在重做我的投资组合以做出反应。太新了。我在这里面临的问题是，当我将react项目托管到服务器上时，一切工作正常，使用进行路由，在导航时将页面移至顶部，等等。但是我观察到，当我关闭网站标签并尝试直接访问组件时。例如，如果我执行“ http://mywebsite.com”，它将起作用。但是，如果我执行“ http://mywebsite.com/contact”，页面就会转到404，是的，该组件确实存在。两种方法都可以在localhost上很好地工作，但是不能在托管服务器（Hostinger）上

我尝试在网上搜索，但找不到任何可靠的答案，StackOverflow上的许多帖子都说与服务器有关的错误，但未显示如何解决。

React-router urls don't work when refreshing or writing manually

How to fix 404 not found when accessing the routes in the url. (SPA REACT)

react-router-dom Build Giving 404 When Accessing URL Directly, But Not In Development

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

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

我无法发表评论，所以我必须回答。我不知道您是否打错了，但是在您的contactme组件的路径中将其指定为contact，因此您应该可以通过

进行访问

http://mywebsite.com/contact

代替

http://mywebsite.com/contactme

Answer 3

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

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

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

当服务器请求进入/contact之类的特定页面时，服务器将尝试在contact目录中查找index.html（通常或等同于您的服务器设置），因为它没有找到任何此类路径或文件，它将返回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等。

Answer 4

我遇到了同样的问题......接受的答案对我不起作用。

我通过使用 spa 参数运行构建解决了这个问题... 以下是解决我的问题的完整命令。

pm2 serve build 5000 --spa --watch --restart-delay=3000

从项目目录运行此命令。

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

4 个答案: