Reactjs 在开发过程中正确显示参数，但在生产过程中不正确显示参数，从而对路由器路径作出反应

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

有趣的是，它在开发中正确呈现，当我运行“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;

从“React”导入React；
从“./凭证”导入凭证；
从“react router dom”导入{BrowserRouter，Route}；
常量应用=（）=>{
返回(
{/*  */}
);
};
导出默认应用程序；

凭证.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;

import React，{Component}来自'React'；
导入“../components/App.css”；
类凭证扩展组件{
render（）{
返回(
礼券
SAR{parseInt（this.props.match.params.id4，10）}
12345678
);
}
}
导出默认凭证；

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"
  ]
}

{
“名称”：“凭证”，
“版本”：“0.1.0”，
“私人”：没错，
“主页”：http://www.besidegroup.com/gift",
“依赖项”：{
“反应”：“^16.7.0”，
“react dom”：“^16.7.0”，
“反应路由器dom”：“^4.3.1”，
“反应脚本”：“2.1.3”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie如果我导航到
http://localhost:3000/gifts/433
SAR的值为NAN，因为这不是定义的路径

但是如果我导航到
http://localhost:3000/433
它正确地给出了url值

另外，我认为您部署的react应用程序不正确……您不能将
build
文件夹复制到您的Cpanel……react应用程序是在节点上构建的，不能复制到Cpanel

在哪里部署你的应用程序有很多选择…像Heroku、Digital ocean或AWS或其他很多…几乎所有的应用程序都提供免费的学习层…这里是许多应用程序中的一个，我只是用这条路线重复了你的问题
…如果我导航到
http://localhost:3000/gifts/433
SAR的值为NAN，因为这不是定义的路径

但是如果我导航到
http://localhost:3000/433
它正确地给出了url值

另外，我认为您部署的react应用程序不正确……您不能将
build
文件夹复制到您的Cpanel……react应用程序是在节点上构建的，不能复制到Cpanel

在哪里部署你的应用程序有很多选择……像Heroku、Digital ocean或AWS或其他很多……几乎所有的应用程序都提供免费的学习层……这里有一个例子，可以从生产中根本不显示任何内容开始。
你会得到一个空白页吗？控制台中出现错误吗？React-dev工具会给你什么？更多详细信息会很好，谢谢。在生产中根本没有显示任何内容？你会得到一个空白页吗？控制台中有错误吗？React dev tools会给你任何东西吗？再详细一点就好了，谢谢。谢谢@Ahm。实际上
和
都在开发中工作。我在谷歌上搜索了更多信息，似乎Cpanel不支持节点yet，这可能是通过路径传递参数不起作用的原因。无论如何，我只是通过Heroku部署，并从我的/gift url重定向。谢谢@Ahm。实际上，
和
都在开发中起作用。我在谷歌上搜索了更多，似乎Cpanel还不支持节点，这可能是传递通过路径的e参数不起作用。无论如何，我只是通过Heroku部署并从我的/gift url重定向。
<Route path="/gift/:id4" component={Voucher} />

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