访问托管在服务器上的网页时出现问题

Question

我已经使用 React.JS 创建了一个网站，但是我现在已经托管了该网站 ` 但我无法访问除主页之外的其他页面。我使用反应组件创建了网站，如下图所示，这可能是问题所在吗？例如，在我单击“关于”网页 link 后，它会将我定向到一个未找到的 404 页面。但是在开发中，我的导航系统运行良好？

const Services = () => {

  return (
    <Container className='services' id='services'>
      <div className='container-fluid' style={textStyle}>
        <p>Do you need a website for your business?</p>
        <p>Do you have an app idea?</p>
        <p>Do you need advice on how to improve your website or app?</p>
        <p>Contact us!</p>
      </div>

      <div className='container-fluid' id='workflow' style={workflowTextStyle}>
        <Row>
          <Col>
            <i className='fas fa-comments fa-3x' />
            <p>Plan - Tell us what you need</p>
          </Col>
          <Col>
            <i className='fas fa-pencil-alt fa-3x' />
            <p>Design - How do you want your website to look and function</p>
          </Col>

          <Col>
            <i className='fas fa-code fa-3x' />
            <p>Development - Regular updates after developments</p>
          </Col>

          <Col>
            <i className='fas fa-check-circle fa-3x' />
            <p>Review - Customer Review Sessions throughout development</p>
          </Col>
        </Row>
      </div>
    </Container>
  );
};

export default Services;

Answer 1

查看有关如何启动部署 React 服务器的 React 文档 https://facebook.github.io/create-react-app/docs/deployment。具体来说，我怀疑这就是您所需要的：

如果您使用的是 Apache HTTP Server，则需要在 public 文件夹中创建一个 .htaccess 文件，如下所示：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

当你运行 npm 运行构建时，它将被复制到构建文件夹。

来自 Quentin 评论的警告：如果您想让您的网站更易于 SEO 索引和访问，NextJS 等其他解决方案可能更适合您的项目。 https://nextjs.org/

Answer 2

我不是托管方面的专家，但由于我也遇到并解决了这个问题，所以我会回答我的能力。

构建一个 React 应用程序会生成一个 index.html 文件。如果你通过 nginx 服务，你可以轻松配置所有路由到那个 index.html。但是，在共享主机环境 (cpanel) 中，当您上传您的构建时，它会上传到一个文件夹，并且只路由到该文件夹指向那个 index.html 并且写入任何其他路由将引导您到另一个共享主机目录因此您正面临 404 问题。解决方案是相应地更改 .htaccess 文件。

访问托管在服务器上的网页时出现问题

Problem with accessing webpages once hosted on server

html

web-hosting

reactjs