反应路由器版本4没有显示任何东西

时间：2017-06-21 03:02:21

标签： node.js reactjs webpack redux react-router

我认为我的React路由器出错了。我是React / Redux的初学者，所以任何帮助都非常感谢。它也可能是我配置webpack的方式，但我的前端没有显示任何内容，但我根本没有收到任何错误。我不确定问题是什么，但我的服务器启动，能够填充模拟数据，webpack编译，所以我认为后端有效。

我很抱歉代码墙，但我真的不知道我哪里出错了，我是一个很大的新手来设置这个。这绝对是我写过的最长的帖子，所以我很感激有人看过它。

我的客户/ src / routes：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

import HomePage from './components/home/HomePage';  
import { Layout } from './components/Layout';  

export const App = () => (
  <Layout>
    <Switch>
      <Route exact path="/" component={HomePage} />
    </Switch>
  </Layout>
);

export default App;

的客户机/ SRC / Homepage.js：

import React from 'react';
import { Link } from 'react-router-dom';

class HomePage extends React.Component {
  render() {
    return (
      <div id="main">
        <h1>Hello</h1>
        <p>World</p>
      </div>
    );
  }
}

export default HomePage;

client / src / Layout.js：

import React from 'react';
import { Link } from 'react-router-dom';

export const Layout = props => (
  <div className="app-container">
    <header>
      <Link to="/">
      </Link>
    </header>
    <div className="app-content">{props.children}</div>
    <footer>
    </footer>
  </div>
);

export default Layout;

client / src / App.jsx：

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store/Store';  
import { syncHistoryWithStore } from 'react-router-redux';
import routes from '../routes';
import { BrowserRouter as Router } from 'react-router-dom'

const store = configureStore();

export default class AppRoutes extends React.Component {
  render() {
    return (
        <Provider store={store}>
          <Router routes={routes} />
        </Provider>
    );
  }
}

的客户机/ SRC / index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './startup/App';

ReactDOM.render(
  <Router>
    <AppRoutes />
  </Router>,
  document.getElementById('main')
);

server / views / index.ejs：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buddie!</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

服务器/ app.js：

/* eslint no-console: "off"*/

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter as Router } from 'react-router-dom';
import { App } from '../client/src/startup/App';

const app = new Express();
const server = new Server(app);
const routes = require('../server/routes/index');

// use ejs templates
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));

app.use('/api/v1', routes)

// universal routing and rendering
app.get('*', (req, res) => {
  let markup = '';
  let status = 200;

  if (process.env.UNIVERSAL) {
    const context = {};
    markup = renderToString(
      <Router location={req.url} context={context}>
        <App />
      </Router>,
    );

    // context.url will contain the URL to redirect to if a <Redirect> was used
    if (context.url) {
      return res.redirect(302, context.url);
    }

    if (context.is404) {
      status = 404;
    }
  }

  return res.status(status).render('index', { markup });
});

// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, (err) => {
  if (err) {
    return console.error(err);
  }
  return console.info(
    `
      Server running on http://localhost:${port} [${env}]
      Universal rendering: ${process.env.UNIVERSAL ? 'enabled' : 'disabled'}
    `);
});

webpack config：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './client/src/index.js',
  output: {
    path: path.join(__dirname, 'server', 'static', 'js'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  devServer: {
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [ 'babel-loader' ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

package.json脚本：

  "scripts": {
    "start": "npm run build:dev && babel-node server/app.js",
    "start:dev": "export NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server.js",
    "start:universal": "export UNIVERSAL=true && npm run start",
    "start:dev:universal": "export NODE_ENV=development && export UNIVERSAL=true && npm run start:dev",
    "build": "NODE_ENV=production webpack -p",
    "build:dev": "webpack -d",
    "build:dev:watch": "webpack -d --watch"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-node6": "^11.0.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.17.2",
    "chalk": "^1.1.3",
    "classnames": "^2.2.5",
    "concurrently": "^3.4.0",
    "debug": "^2.6.8",
    "ejs": "^2.5.6",
    "express": "^4.15.3",
    "immutable": "^3.8.1",
    "jsx-loader": "^0.13.2",
    "morgan": "^1.8.2",
    "node-jsx": "^0.13.3",
    "nodemon": "^1.11.0",
    "normalizr": "^3.2.3",
    "pg": "^6.2.4",
    "react": "^15.6.1",
    "react-addons-test-utils": "15.0.2",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^1.0.7",
    "react-slick": "^0.14.11",
    "redux": "^3.7.0",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "1.0.2",
    "redux-thunk": "^2.2.0",
    "sequelize": "^4.1.0",
    "sequelize-cli": "^2.7.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5",
    "yargs": "^8.0.2"
  },
  "proxy": "http://localhost:8000"

3 个答案:

答案 0 :(得分：1)

在src/client/App.js文件中，我注意到您正在从react-router-redux导入syncHistoryWithStore。我相当有信心RR4和旧版本的react-router-redux彼此不兼容。与@next一起安装的新版本不包含syncHistoryWithStore。

这可能是你的问题。

答案 1 :(得分：1)

刚刚注意到此代码块中的内容

context

}

您正在为<Router />分配一个空对象，将空上下文传递给context.url，然后检查context.is404和undefined，它们都将是context = {...context} {1}}每次检查它们！也许你的意思是function submitvalues(){ var sheet = spreadSheetApp.getActive().getActiveSpreadsheet(); var question = Browser.msgBox('Is This Entry Correct?', 'This cell cannot be changed after entering a value', Browser.Buttons.YES_NO); if(question == 'no'){ //etc. etc.} } ？真的不确定这是否会影响渲染（很确定它不会），但值得一提。

答案 2 :(得分：1)

如果您没有将此代码作为通用代码运行，那么它将永远不会更新标记，它将始终为空，因此不会打印任何内容。

代码中的一个小修正：在index.ejs

中
        

删除最后一个＆＃39; - ＆＃39;在标记标记中，它应该是＆lt;％ - markup％＆gt;

相关问题
最新问题