使用 Apache2 路由 React 页面的问题

Question

我的 React 页面上的主页以外的访问路径存在问题，该页面托管在 Apache2 网络服务器上。

这是页面：www.TJBrackett.com

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

Apache2：

 ServerName tjbrackett.com
 ServerAdmin webmaster@tjbrackett.com
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]

反应 index.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 错误问题。 apache 未指向 .htaccess 文件。

Answer 1

通过将每个 "a href" 更改为反应 "link to" 解决了这个问题。还做了其他各种改动。

新的 .htaccess 文件：

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

新 React index.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 index.js 文件也发生了一些变化。

ServerName www.tjbrackett.com
ServerAdmin webmaster@tjbrackett.com
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>

使用 Apache2 路由 React 页面的问题

Issues Routing React page using Apache2

routing

apache2

reactjs