您可以通过两种可能的方式解决此问题。
1.在以下位置将路由历史更改为“hashHistory”,而不是“browserHistory”
<Router history={hashHistory} >
<Route path="/home" component={Home} />
<Route path="/aboutus" component={AboutUs} />
</Router>
现在使用以下命令构建应用程序:
sudo npm run build
将构建文件夹放置在var/www/文件夹中,现在应用程序可以正常工作,并且每个URL都添加了#标签,例如
localhost/#/home
localhost/#/aboutus
解决方案2:使用browserHistory而不是#标签
在您的路由器中设置history = {browserHistory},现在使用sudo npm run build进行构建。
您需要创建“conf”文件来解决404未找到页面问题,conf文件应该像这样。
打开终端并输入以下命令
cd /etc/apache2/sites-available
ls
nano sample.conf
将以下内容添加到其中。
<VirtualHost *:80>
ServerAdmin admin@0.0.0.0
ServerName 0.0.0.0
ServerAlias 0.0.0.0
DocumentRoot /var/www/html/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory "/var/www/html/">
Options Indexes FollowSymLinks
AllowOverride all
Require all granted
</Directory>
</VirtualHost>
现在您需要使用以下命令启用sample.conf文件。
cd /etc/apache2/sites-available
sudo a2ensite sample.conf
然后它会要求您重新加载Apache服务器,使用sudo service apache2 reload或restart。
接下来打开您的localhost/build文件夹,并添加以下内容的.htaccess文件。
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
现在应用程序正常工作。
注意:将0.0.0.0 IP更改为您的本地IP地址。
我希望对他人有所帮助。
npm run start
运行Webpack服务器时,该文件是不可见的。我不明白为什么你要单独构建另一个文件。在我的情况下,我只创建了index.html文件、index.js文件和其他js文件,并使用Webpack进行集成。 - Mr_Perfectnpm run build
将创建index.html文件,并且相应的JavaScript会全部打包到一个压缩后的js文件中,然后放在一个名为“build”的单独文件夹中。 - Paulos3000