Question

我正试图让两条路线正常工作＆＃39; /＆＃39;并且＆＃39;登录＆＃39; atm只是使用同一页面。但是，当我通过express而不是webpack-dev-sever加载页面时，我得到一个空白的html页面而不是react-router加载。不知道从哪里开始。

我已经看过我认为快递直接路由到html页面的例子，我在这里做的，我没有错误只是一个空白的HTML，用＆＃39; root＆＃39; id它将反应连接到。

＆＃13;

folder
├── server.js
├── index.js(for final react render)
├── Src
│   ├── public
│   │   ├── index.js(empty html for react)
│   │   
│   │__ components
│   │   
│   │__routes   
│   │  |__index.js(react-routes)
    |
    |__index.js(gathers all components to push to index.js next directory up)

＆＃13;

Server.js

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

const app = express();
const PORT = process.env.PORT || 3000;


app.get('/**', (req, res) => {
  res.sendFile(path.join(__dirname, '/src/public/index.html'));
});

app.listen(PORT, () => {
  console.log('server has started at:' + PORT);
});

的package.json

{
  "name": "chauffeurus",
  "version": "1.0.0",
  "description": "new repo of previous group project similar to uber website",
  "main": "./index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "postinstall": "webpack -p",
    "start": "node server.js"
  },
  "keywords": [
    "reactjs",
    "javascript",
    "webpack",
    "mongoose",
    "mongodb"
  ],
  "author": "christian a.",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "bcrypt-nodejs": "0.0.3",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.26.0",
    "mongoose": "^4.13.2",
    "passport": "^0.4.0",
    "react": "^15.4.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "webpack": "^1.14.0"
  }
}

路线index.js

import React from 'react'
import { Homepage } from '../index.js';
import { BrowserRouter, Route } from 'react-router-dom';

export default () => (
  <BrowserRouter>
    <div>
      <Route path="/" exact component={Homepage} />
      <Route path="/login" exact component={Homepage} />
    </div>
  </BrowserRouter>
)

src文件夹之外的index.js

import React from 'react'
import ReactDOM from 'react-dom';
import { Homepage } from './src/index.js';
import Routes from './src/index.js';

ReactDOM.render(<Routes />, document.getElementById('root'));

Webpack.config.js

＆＃13;

const path = require('path');

//NPM Install that "tells the plugin to add any JavaScript into the bootom of the page...
// just before the closing body tag"
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/public/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './index.js',
  output: {
    path:  __dirname + './dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(png|jpg|gif)$/, loader: 'file-loader' }
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

＆＃13;

Answer 1

I think the problem is you also need to serve your static assets. Include this line in your server.js:

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

You have to replace the code with your directories, I think public is the folder in your case ( where the built js files and images reside ).

在本地使用react-router进行表达时，为什么我的html根空白

1 个答案: