React Router 在构建到 ftp 服务器后不渲染组件

Question

我用yarn build. 为了让应用程序在我的服务器上运行，我添加"homepage": "./"了 package.json 文件。该应用程序存储在服务器上的一个文件夹中，我使用https://my-url.com/appname访问该应用程序

App.js 已呈现，但我没有看到我的组件：

function App() {

  const [navigationState, setNavigationState] = useState(false);

  return (

    <div className="App">

      <Router>

        <Header

          showNavigation={navigationState}

          setShowNavigation={setNavigationState}

        />

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/contact" exact component={Contact} />

        </Switch>

        <Footer />

      </Router>

      <div className="space"></div>

    </div>

  );

}

在Header组件中我有我的链接

<Link to="/">Home</Link>
<Link to ="/contact">Contact</Link>

当我单击HomeURL 切换到https://my-url.com/时，我看到了 Home 组件。单击ContactURL 切换到https://my-url.com/contact后，我看到了联系人。

我的 .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>

我需要做什么才能保留文件夹路径并在第一次调用时呈现主组件？

• https://my-url.com/ 404

• https://my-url.com/appname显示 App Component 但不呈现 Home 组件

• https://my-url.com/appname/contact 404

• https://my-url.com/contact 404

单击主页链接后，我得到 -https://my-url.com/ 显示主页组件单击联系人链接后，我得到 https://my-url.com/contact显示联系人组件

在两个 url 上重新加载页面会给出404.

Answer 1

为了让它工作，我做了以下步骤：添加.htaccess文件到public文件夹：Options -MultiViewsRewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^ index.html [QSA,L]修改package.json并添加："homepage": "http://my-url.com/foldername"在App.js将文件夹名称添加到<Route path="<<here>>" />：<Route path="/foldername/" exact component={Home} /><Route path="/foldername/contact" exact component={Contact} />

Answer 2

我在以前的项目中遇到过这个问题，因为它是带有 apache 的 GoDaddy Linux 主机，所以我添加了这一行"homepage": "my-url.com" 到你的 package.json然后我编辑了我的 .htaccess 文件，在上面添加了我的主要路线我使用的文件有这个内容RewriteOptions inheritRewriteEngine On&nbsp; RewriteBase /&nbsp; RewriteCond %{REQUEST_FILENAME} !-f&nbsp; RewriteCond %{REQUEST_FILENAME} !-d&nbsp; RewriteCond %{REQUEST_FILENAME} !-l&nbsp; RewriteRule . / [L]

Answer 3

我认为这可能与 react-router 处理客户端或服务器端渲染 (SSR) 渲染的方式有关。请检查此文档片段以正确设置客户端&nbsp;https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing或者尝试将渲染配置更改为 SSR，应该没问题。

Answer 4

有同样的问题！我解决了它以BrowserRouter在HashRouter我的App.jsx.&nbsp;我的 FTP 无法处理BrowserRouter.在我更新所有内容后，它工作正常。