使用 Apache2 路由 React 页面的问题

Question

>我在访问 React 页面上的主页以外的路由时遇到问题，该页面托管在 Apache2 Web 服务器上。

这是页面： www.TJBrackett.com

我尝试将 .htaccess 文件添加到包含 index.html 文件的文件夹中，但这会导致 500 错误。

阿帕奇2：

 ServerName tjbrackett.com
 ServerAdmin [e-mail]
ServerAlias *.tjbrackett.com
DocumentRoot /var/www/tjbrackett.com
<Directory /var/www/tjbrackett.com>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Require all granted
    Order allow, deny
    allow from all
</Directory>

.htaccess 文件：

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]

反应索引.js：

ReactDOM.render(
    <BrowserRouter
        basename="http://www.tjbrackett.com">
        <Route exact path='/' component={App} />
        <Route exact path='/contact' component={Contact} />
        <Route exact path='/about' component={About} />
    </BrowserRouter>,
    document.getElementById('root')
)

我如何尝试在 React 页面中路由：

<a href="http://www.tjbrackett.com/about">

这是我第一次跳入 apache2 和一般的网络托管。我不确定我是否需要设置一个快速后端来为路由提供服务，或者我是否需要为此项目设置 docker。任何帮助和提示将不胜感激。

编辑：修复了500错误问题。.htaccess文件没有被apache指向。

Answer 1

通过将每个"href"更改为反应"链接到"来解决此问题。还进行了其他各种更改。

新的 .htaccess 文件：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

新的反应索引.js：

ReactDOM.render(
    <BrowserRouter>
        <Route exact path='/' component={App} />
        <Route exact path='/contact' component={Contact} />
        <Route exact path='/about' component={About} />
    </BrowserRouter>,
    document.getElementById('root')
)

新页面链接：

<Link to="/about"></Link>

编辑：如果您在Apache中重新加载时遇到React中断的问题，这就是我将Apache文件更改为的内容。React 索引.js文件也发生了一些变化。

ServerName www.tjbrackett.com
ServerAdmin [e-mail]
ServerAlias *.tjbrackett.com
DirectoryIndex index.html
DocumentRoot /var/www/tjbrackett.com
<Directory /var/www/tjbrackett.com>
order allow,deny
allow from all
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
</Directory>