Question

我有一个非常简单的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;

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值。

我还认为您的应用程序部署不正确。...您不能只将build文件夹复制到您的Cpanel中...反应应用程序是在节点上构建的，无法复制到Cpanel中

将应用程序部署到何处有很多选择。例如Heroku，Digital ocean或AWS或其他很多...几乎所有这些都提供免费的学习层……这是其中之一tutorials从那里开始

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

1 个答案: