Путь React-Router с параметрами, отображаемыми должным образом в разработке, но не в производстве - PullRequest
Новая
       5

Путь React-Router с параметрами, отображаемыми должным образом в разработке, но не в производстве

0 голосов
/ 12 февраля 2019

У меня очень простое приложение реакции, в основном я хочу отобразить страницу по ссылке с параметрами, и я отображаю параметры на странице.

Самое смешное, что оно правильно отображается в процессе разработки, и когда язапустите «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.Inspect показывает, что он перемещается к правильному 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. Не найдено.

1 Ответ

0 голосов
/ 12 февраля 2019

Я только что повторил ваш вопрос с этим маршрутом <Route path="/:id4" component={Voucher} /> .... если я перешел к http://localhost:3000/gifts/433, значение SAR дает NAN, потому что это не определенный путь ...

Но если, еслия перешел на http://localhost:3000/433, это дает правильное значение URL.

Также я думаю, что вы неправильно развертываете свое приложение реакции .... вы не можете просто скопировать папку build в свою Cpanel ......Реактивные приложения построены на узле и не могут быть скопированы в Cpanel.

Существует множество вариантов того, где развернуть ваше приложение, например, Heroku, Digital Ocean или AWS или множество других ... Почтивсе они предлагают бесплатный уровень для обучения ... и вот один из многих учебников , чтобы начать с

...