Question

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

这是页面：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页面

1 个答案: