Блог

У меня все готово и работает на моем сервере разработки, когда я пытался развернуть на реальный веб-диск, компоненты вообще не отображаются.

На консоли ничего не отображается, но состояние picArray обновляется с информацией, поступающей из серверной части.

В основном, что происходит, можно увидеть на этих изображениях: 1-е (localhost / developement server) отображает компонент входа, а на 2-м (загруженном на сервер) изображении компонент входа вообще не отображается.

Я понятия не имею, что здесь происходит, поэтому я решил обратиться за помощью. Я включил код app.js, Login.js поскольку это индекс. Я также включил свой package.json.

Что я пробовал: я пробовал создавать без базового имени маршрутизатора, добавляя точный адрес и путь к «домашней странице» package.json и пробуя немного другой синтаксис в маршрутных путях.

app.js

 import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import './App.css';
import {getAllMedia} from './utils/MediaAPI';
import Nav from './components/Nav';
import Home from './views/Home';
import Profile from './views/Profile';
import Single from './views/Single';
import Login from './views/Login';
import {tokenCheck} from './utils/MediaAPI';
import PropTypes from 'prop-types';
import {Redirect} from 'react-router';

class App extends Component {
  state = {
    picArray: [],
    user: [],
  };

  componentDidMount() {
    getAllMedia().then(pics => {
      this.setState({picArray: pics});
    });
    tokenCheck(localStorage.getItem('Login-token')).then(data => {
      if (data.message) {
        this.setState({errorMessage: data.message});
      } else {
        this.setState({user: data});
        this.setState({errorMessage: ''});
      }
    });
  }

  setUser = (data) => {
    this.setState({user: data});
    localStorage.setItem('Login-token', data.token);
    this.setState({errorMessage: ''});
  };

  logout = () => {
    this.setState({user: ''});
    localStorage.clear();
    tokenCheck(localStorage.getItem('Login-token')).then(data => {
      this.setState({errorMessage: data.message});
    });
    return <Redirect to='/'/>;
  };

  render() {
    return (
        <div id='container'>
          <Router basename="/~juhoh/testbuild">
            {!this.state.errorMessage amp;amp; <Nav/>}
            <Route exact path="/" render={(props) => (
                <Login {...props} setUser={this.setUser}/>
            )}/>
            <Route exact path="/home" render={(props) => (
                <Home {...props} picArray={this.state.picArray}/>
            )}/>
            <Route exact path="/profile" render={(props) => (
                <Profile {...props} userData={this.state.user}/>
            )}/>
            <Route exact path="/single/:id" component={Single}/>
            <Route exact path="/logout" component={this.logout}/>
          </Router>
        </div>
    );
  }
}

App.propTypes = {
  history: PropTypes.object,
};

export default App;
  

Login.js

 import React, {Component} from 'react';
import {login, tokenCheck} from '../utils/MediaAPI';
import PropTypes from 'prop-types';
import {registerUser} from '../utils/MediaAPI';
import {checkIfUserNameExists} from '../utils/MediaAPI';

class Login extends Component {
  state = {
    username: '',
    password: '',
    email: '',
    full_name: '',
  };

  componentDidMount() {
    tokenCheck(localStorage.getItem('Login-token')).then(data => {
      if (data.message) {
        console.log('No token found. No redirection needed.');
      } else {
        this.props.history.push('/home');
      }
    });
  }

  handleInputChange = (evt) => {
    const target = evt.target;
    const value = target.value;
    const name = target.name;
    //console.log(name, value);
    this.setState({
      [name]: value,
    });
  };

  login = (evt) => {
    evt.preventDefault();
    login(this.state.username, this.state.password).then((user) => {
      if (user.token) {
        this.props.setUser(user);
        this.props.history.push('/home');
      } else {
        window.alert(user.message);
      }
    });
  };

  register = (evt) => {
    evt.preventDefault();
    checkIfUserNameExists(this.state.username).then((isAvailable) => {
      if (isAvailable.available === true) {
        registerUser(this.state.username, this.state.password,
            this.state.full_name, this.state.email).then((data) => {
          if (data.error) {
            window.alert(data.message   'n'   data.error);
          } else {
            this.login(evt);
            window.alert(data.message   'nLogging in...');
          }
        });
      } else {
        window.alert('username not available');
      }
    });
  };

  render() {
    return (
        <React.Fragment>
          <h1>Login</h1>
          <form onSubmit={this.login}>
            <input type="text" name="username" placeholder="username"
                   value={this.state.username}
                   onChange={this.handleInputChange}/>

            <input type="password" name="password" placeholder="password"
                   value={this.state.password}
                   onChange={this.handleInputChange}/>

            <button type="submit">Login</button>

          </form>
          <br/>

          <h1>Register</h1>
          <form onSubmit={this.register}>
            <input type="text" name="username" placeholder="username"
                   value={this.state.username}
                   onChange={this.handleInputChange}/>

            <input type="password" name="password" placeholder="password"
                   value={this.state.password}
                   onChange={this.handleInputChange}/>

            <br/>

            <input type="text" name="full_name" placeholder="fullname"
                   value={this.state.full_name}
                   onChange={this.handleInputChange}/>

            <input type="text" name="email" placeholder="email"
                   value={this.state.email}
                   onChange={this.handleInputChange}/>

            <button type="submit">Register</button>

          </form>
        </React.Fragment>
    );
  }
}

Login.propTypes = {
  setUser: PropTypes.func,
  history: PropTypes.object,
};

export default Login;
  

package.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "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"
  ],
  "devDependencies": {
    "eslint": "5.12.0",
    "eslint-config-google": "^0.12.0",
    "eslint-plugin-react": "^7.12.4"
  },
  "homepage": "."
}
  

Я предполагаю, что вы не используете хэш-маршрутизатор. Вы можете попробовать это вместо маршрутизатора браузера, и это могло бы решить проблему. Кроме того, вы могли бы использовать какой-нибудь серверный интерфейс для решения этой проблемы.