我的 React 引导路由页面路径在实时刷新后不起作用答案

【问题标题】：My React bootstrap routed page path doesn't work after refreshing in live我的 React 引导路由页面路径在实时刷新后不起作用
【发布时间】：2020-04-03 11:08:40
【问题描述】：

在这个网址你可以看到这个问题：http://qconstruct.in/contact

这是来自代码沙箱的代码链接：https://codesandbox.io/s/upbeat-hypatia-3pre9 似乎输出在代码沙箱中运行良好。但是我的托管网站在刷新其他路由页面后无法正常工作

我使用 React Router Bootstrap

import { BrowserRouter as Router, Route, Switch  } from "react-router-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

【问题讨论】：

您如何托管您的应用程序？
你在服务器端使用过node js吗
不，现在我没有使用任何服务器端代码。它唯一的前端。 @iamwebkalakaar
我在 Hostgator 中托管了我的网站。（多域共享主机）@ZohaibIjaz

标签： reactjs router react-bootstrap react-router-dom

【解决方案1】：

尝试在构建的根目录中添加 .htaccess 文件

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

【讨论】：

看来问题出在托管方面。因为我在 Firebase 中创建和托管的路由相同，所以它工作正常，书签 url 工作。但是只有在 hostgator 托管中，它才会出现路由刷新错误的问题。如果可以通过添加 '.htaccess' 的方式来修复，那么具体怎么做呢？

【解决方案2】：

这个问题在服务器端。

参考此链接： https://tylermcginnis.com/react-router-cannot-get-url-refresh/

我的主机中有 appache 服务器，因此我在我的网站根路径中的“.htaccess”文件中添加了以下代码。

RewriteBase /
RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

它有效！感谢大家的帮助。

【讨论】：