Question

我已经使用React.JS创建了一个网站，但是我现在已经托管了该网站`，但是除了主页之外，我无法访问其他页面。我使用react组件创建了网站，如下图所示，这可能是问题吗？例如，单击“关于网页”链接后，它会将我定向到未找到的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，则需要在公用文件夹中创建一个.htaccess文件，如下所示：

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

当您运行npm run build时，它将被复制到build文件夹。

昆汀评论中的注释：如果您想使您的网站更具SEO可索引性和可访问性，则其他解决方案（例如NextJS）可能更适合您的项目。 https://nextjs.org/

Answer 2

我不是主持事务的专家，但由于我也面对并解决了这个问题，因此我将尽我所能。

构建一个React应用程序会生成一个index.html文件。如果您通过nginx提供服务，则可以轻松配置将所有路由定向到该index.html。但是，在共享托管环境（cpanel）中，当您上载构建时，它会上载到一个文件夹，并且只有指向该文件夹的路由才直接指向该index.html，并且编写任何其他路由会将您定向到另一个共享托管目录，因此您正面临404问题。解决方案是相应地更改.htaccess文件。

服务器托管后访问网页的问题

2 个答案: