react-router 二级路由直接访问404问题解决

问题

App包含目录App/about，App部署在 XXX.com/app 目录下。

通过XXX.com/App访问App项目，通过项目内router进入/about目录可以访问该页面。

直接通过URL访问 XXX.com/App/about 显示页面 404

解决方案

服务器配置

nginx

server {
  ...
  location / {
    try_files $uri /index.html
  }
}

Apache

修改httpd.conf

查找

# LoadModule rewrite_module modules/mod_rewrite.so
//有则去掉 "# " 无则添加

项目根目录创建.htaccess文件

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /SZ-PDemos/index.html [L]
</IfModule>

参考 & 引用

https://blog.csdn.net/wujiangwei567/article/details/40627143

http://blog.codingplayboy.com/2017/12/26/react-router-browserhistory-404/

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html