Question

我有一个使用路由器的反应应用程序，如果URL没有直接输入到地址栏中，则工作正常，而是在导航应用程序时由反应路由器设置。我通过Express代理运行react应用程序，将ExpressJS添加到应用程序中。目标是将任何动态请求重定向到react应用程序，以便它可以处理它，而不是Express。我看了很多例子并尝试过使用它们，但我没有运气来重新直接工作。

文件夹结构和密钥文件位置如下：

[根目录]
  ---- [客户]
  --------- [node_modules]
  --------- [公众]
  --------- [scss]
  --------- [src]
  --------- package.json
  --------- webpack.config.js
  ---- [服务器]
  --------- index.js
  ---- [node_modules]
  ---- package.json

＆＃34;客户＆＃34;目录包含react应用程序。＆＃34;服务器＆＃34;目录包含Express应用程序。 Express应用程序的package.json位于根目录中，而react app的package.json位于＆＃34; client＆＃34; 。目录

服务器/ index.js

const express = require('express');
const path = require('path');

const PORT = process.env.PORT || 5000;

const app = express();

// Serve static files
app.use(express.static(path.resolve(__dirname, '../client/public')));

app.get('*', function(request, response) {
response.sendFile(path.resolve(__dirname, '../client/public', 'index.html'));
});

app.listen(PORT, function () {
console.error(`Listening on port ${PORT}`);
});

的客户机/的package.json

包含"proxy": "http://localhost:5000"

的客户机/ webpack.config.js

包含devServer，entry和output的以下内容（我排除了与URL处理无关的各种加载器）：

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

module.exports = (env = {}) => {
  return {
    entry: {
      index: [SRC_DIR + '/index.js']
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js'
    },
    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: BUILD_DIR,
      compress: true,
      hot: true,
      open: true,
      historyApiFallback: true
    }
  }
};

的客户机/ SRC / index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';

import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';

import rootReducer from './reducers';


// Wrapper
import SiteWrapper from './wrappers/SiteWrapper/'

// Pages
import Error404 from './ErrorPages/Error404/'

const history = createHistory();

const middleware = routerMiddleware(history);

const store = createStore(
  combineReducers({
    rootReducer,
    router: routerReducer
  }),
  applyMiddleware(middleware)
)

ReactDOM.render((
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/404" name="Error 404" component={Error404}/>
        <Route path="/" name="Home" component={SiteWrapper}/>
      </div>
    </ConnectedRouter>
  </Provider>
), document.getElementById('root'));

我首先运行Express应用程序，它开始侦听端口5000，然后运行react应用程序。输入动态网址http://localhost:7500/dynamicurl/test-dynamic-url时，该应用不再显示404，但它根本不会显示任何内容，这就是我在开发者控制台中看到的内容：

Refused to apply style from 'http://localhost:7500/dynamicurl/index.fonts.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test-dynamic-url:1 Refused to apply style from 'http://localhost:7500/dynamicurl/index.styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test-dynamic-url:54 GET http://localhost:7500/dynamicurl/index.bundle.js net::ERR_ABORTED

我在这里做错了什么？我错过了什么吗？

提前致谢

从快递重定向动态URL以作出反应

0 个答案: