带有参数的 React-Router 路径在开发中正确显示但在生产中不正确

Question

我有一个非常简单的反应应用程序，基本上我想显示一个带有参数的链接的页面，并在页面中显示参数。

有趣的是它在开发中正确呈现，当我运行“npm run build”时，我只是将它复制到 CPanel 根文件夹的子文件夹中。

此外，如果我完全删除标签并仅显示，那么我的页面会显示，但显示的值不是动态的。

感谢任何帮助。谢谢。

我有以下代码：

App.js

import React from 'react';
import Voucher from './Voucher';

import { BrowserRouter, Route } from 'react-router-dom';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/gift/:id4" component={Voucher} />
        </div>
      </BrowserRouter>
      {/* <Voucher /> */}
    </div>
  );
};

export default App;

Voucher.js

import React, { Component } from 'react';

import '../components/App.css';

class Voucher extends Component {
  render() {
    return (
      <div className="container">
        <div className="header-logo">
          <img className="logo" src={require('../img/vouch_logo.png')} alt="" />
        </div>
        <div className="voucher-body">
          <div className="voucher-text">Gift Voucher</div>
          <div className="voucher-amt">
            SAR {parseInt(this.props.match.params.id4, 10)}
          </div>
          <div className="voucher-num">
            12345678
          </div>
          <div className="footer-text">
            <a href=""></a>
          </div>
        </div>
      </div>
    );
  }
}

export default Voucher;

package.json

{
  "name": "vouchers",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://www.besidegroup.com/gift",
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

为清晰起见更新：

如果我只是导航到 www.mypage.com/gift，我会得到一个空白页面。检查显示它正在导航到正确的 index.html，它只显示标签。

但是，当我尝试使用参数 www.mypage.com/gift/1 导航时，我收到 404 错误未找到。

更新：

我更改了路由路径

<Route path="/gift/:id4" component={Voucher} />

到

<Route path="/:id4" component={Voucher} />

我再次导航到 www.mypage.com/gift，至少它显示了该页面，但它在显示的文本上显示了 NaN 错误，因为它没有传递任何变量。但是，当我导航到 www.mypage.com/gift/1 时，我得到另一个 404 错误未找到。

Answer 1

我刚刚用这条路线<Route path="/:id4" component={Voucher} /> 复制了你的问题...。如果我导航到http://localhost:3000/gifts/433，SAR 的值会给出 NAN，因为这不是定义的路径...

但如果我导航到http://localhost:3000/433，它会给出正确的 url 值。

另外我认为你错误地部署了你的 react 应用程序......你不能只是将 build 文件夹复制到你的 Cpanel ......React 应用程序是在节点上构建的，并且不能复制到 Cpanel。

在哪里部署您的应用程序有很多选择......比如 Heroku、Digital Ocean 或 AWS 或其他很多......几乎所有这些都提供免费学习层......这是众多选择之一tutorials 从那里开始