个人中心
gpt4 book ai didi

node.js - React router 版本 4 没有显示任何内容

转载 作者：太空宇宙 更新时间：2023-11-03 23:02:18 24 4
gpt4 key购买 nike

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

我对代码墙感到非常抱歉，但我真的不知道我哪里出了问题，而且我是一个对此进行设置的巨大新手。这绝对是我写过的最长的帖子，因此我感谢任何人阅读它。

我的客户端/src/路由:

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;

client/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;

客户端/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>
    );
  }
}

client/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')
);

服务器/ View /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'}
    `);
});

网络包配置:

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"

最佳答案

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

这可能是您的问题。

关于node.js - React router 版本 4 没有显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44666170/

24 4 0
文章推荐： c# - HttpWebRequest .Net Core 设置超时
文章推荐： c++ - 使用 OpenCV 2.4.3 的双线性插值的 VideoCapture 旋转
文章推荐： node.js - 错误提示没有 package.json，但它位于当前目录中
文章推荐： c# - 以前测试过的正则表达式现在不工作，但在正则表达式测试器中工作
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com