Question

我有一个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个小时以来我一直在苦苦挣扎，而且我想我甚至都检查了有关此问题的每篇文章，甚至是官方文档。

谢谢您的帮助

反应静态路由服务器渲染不起作用

0 个答案: