Реагирование статического сервера маршрутизации не работает - PullRequest
Новая
       15

Реагирование статического сервера маршрутизации не работает

0 голосов
/ 18 декабря 2018

У меня есть приложение React, которое отлично работает на моем локальном компьютере, но мой маршрут не работает на моем веб-хостинге (веб-облако OVH).

Я проверил много постов, в которых говорится об этом, и я пыталсяследуйте их рекомендациям, но я думаю, что что-то упустил.

Если я хорошо понимаю, я не могу получить доступ к www.mysite/login, потому что в моей папке dist нет login.html.

Итак, я попытался создать static.json вот так (но не знаю, используется ли моя статика) 

{
    "root": "dist/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

и .htaccess в моем общедоступном хранилище 

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

вот мой index.js

ReactDOM.hydrate(
  <BrowserRouter basename="/">
      <App />
      </BrowserRouter>,
  document.getElementById('root'))

вот мой App.js

     class App extends Component {
/* ... some stuff ... */
        render() {
            return (
                <IntlProvider locale={language} messages={messages}>
                    <div className="App">
                        <div className="App-content">
                            <div className="menu">
                                <Navbar handleLanguage={langValue => this.langChange(langValue)} language={language} />
                            </div>
                            <Switch>
                               <Route exact path="/" render={(props) => <Home {...props} language={language}/>} ></Route>
                               <Route path='/login' component={Login} ></Route>
                            </Switch>
                        </div>
                    </div>
                </IntlProvider>
            );
        }
    }

Я думаю, если я смогу использовать кнопку, которая делает this.props.history.push('/login'), я получу доступ к своей странице входа, но на самом деле я не могу сделать такую ​​кнопку на главной странице, но это другая проблема.

вот мой app.js

import express from "express";
import React from 'react';
import ReactDOMServer from "react-dom/server";
import App from "./src/App.js";
import fs from 'fs';
const express = require('express');
const http = require('http');
const path = require('path');

let app = express();
app.use(express.static(path.join(__dirname, 'dist')));

// Handles any requests that don't match the ones above
app.get('/*', (req,res) =>{
    const staticContext = {}
    const app = ReactDOMServer.renderToString(
             <StaticRouter location={req.url} context={staticContext}>
               <App /> 
             </StaticRouter>
           );
    const indexFile = path.resolve('./dist/index.html');
    fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    return res.send(
      data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
    );
  });
});

const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

Знаете ли вы, что я что-то упустилили нет ?потому что я борюсь с 5 часов, и я думаю, что я проверил каждый пост об этой проблеме, даже официальный документ.

Спасибо за вашу помощь

...