时间戳

首页 > 解决方案 > React Router 在构建到 ftp 服务器后不渲染组件

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

问题描述

我用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/ 显示主页组件单击联系人链接后，我得到 https://my-url.com/contact显示联系人组件

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

这是我的package.json：

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "BROWSER=firefox PORT=2000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "./"
}

标签： javascriptreactjsreact-router-dom

解决方案

我在之前的项目中遇到过这个问题，因为它是带有 apache 的 GoDaddy Linux 主机，所以我添加了这一行

"homepage": "my-url.com" 到你的 package.json

然后我编辑了我的 .htaccess 文件，在上面添加了我的主要路线

我使用的文件有这个内容

RewriteOptions inherit
RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . / [L]

推荐阅读