Reactjs “如何修复”；404“；直接访问react中的组件时出错

我正在重做我的投资组合。对它来说是相当新鲜的。我在这里面临的问题是，当我将react项目托管到服务器上时，一切正常，使用路由，在导航时将页面移动到顶部等等。， 但我观察到，当我关闭我的网站标签，并试图直接访问一个组件。例如，如果我做了“”，它就会工作。但是如果我这样做，页面会变成404，是的，组件确实存在。这两种方法都可以在本地主机上正常工作，但不能在托管服务器（Hostinger）上正常工作

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

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

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>
    );
  }
}

class mainContent扩展了React.Component{
render（）{
返回(
PRASHANTH KUMAR SRIPATHI
联系
简历
文件夹
家
{/*
关于
*/}
{/**/}
&副本；2019年-Prashanth Kumar Sripathi
);
}
}

---

如何修复此问题，使其不显示404。我不想以重定向到“”的方式修复此问题，因为如果我要构建另一个包含cope代码段的站点，我需要共享该代码段，该代码段将重新路由到索引页。

我无法评论，因此我必须回答它。我不知道您是否输入了错误，但在您的路径中，您的contactme组件的路径被指定为contact，因此您应该能够通过

而不是

---

TL；DR是服务器问题，而不是前端代码问题

回答您对路线渲染404的关注

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

当服务器请求进入特定页面（如

/contact

时，服务器将尝试在

contact

目录中查找index.html（一般或等效，具体取决于您的服务器设置），由于未找到任何此类路径或文件，因此将返回404

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

以下是您正在寻找的相关文件：

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

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

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

Netlify：

更多变体，包括Github页面、Heroku、Firebase、PHP、Ruby on Rails、.Net、Flask等，可在此处找到：

• 或

---

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

完全复制和粘贴：

重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写cond%{REQUEST_FILENAME}-L
重写规则/index.html[L]

我也面临同样的问题。。。被接受的答案对我不起作用

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

pm2服务构建5000--spa--watch--restart delay=3000

---

从project dir运行此命令。

感谢您查看此@delmin，但这只是一个示例，不是一个拼写错误，我更新了问题以避免进一步混淆。要么您的交换机中缺少路线，要么您的路线名称中有一个拼写错误Hi Rikin，这只是一个示例，我更新了问题。好的，我知道您的问题是SPA的工作方式是您必须从web服务器重新路由到索引，并让应用程序负责路由映射，因为您的服务器不知道您的前端路由如何实现这一点？我对这真的很陌生。非常感谢。这里有一篇简单的文章来解决这个问题。我们可以为任何SPA框架解决此问题。感谢Rikin的建议，让我尝试使用此解决方案，成功后我将在此更新。：）现在为我工作。我也有同样的问题，我也有同样的问题，这个解决方案帮助了我。非常感谢！