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

Question

我正在重做我的投资组合以做出反应。所以相当新。我在这里面临的问题是，当我将我的反应项目托管到服务器时，一切正常，使用路由，在导航时将页面移动到顶部等， 但是我观察到，当我关闭我的网站选项卡并尝试直接访问组件时。例如，如果我执行“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”的方式解决这个问题，因为如果我要建立另一个可以应对 sn- ps 我需要分享一下，它只会将它重新路由到索引页面。

Answer 1

我不能评论，所以我必须回答。我不知道你是否打错了，但在你的contactme组件的路由路径中指定为联系人，所以你应该可以通过

访问它

http://mywebsite.com/contact

代替

http://mywebsite.com/contactme

Answer 2

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

网络化： 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

我不确定您是否仍然需要帮助，但我能够与我在 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 4

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

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

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

从项目目录运行此命令。