reagieren Router Version 4 nicht alles zeigt

Ich denke, dass ich meine etwas falsch mit React Router tue. Ich bin ein Anfänger zu React/Redux, also wird jede Hilfe wirklich geschätzt. Es könnte auch sein, wie ich konfigurierte webpack, aber mein vorderes Ende nichts angezeigt wird, aber ich bin keine Fehler überhaupt zu bekommen. Ich bin nicht sicher, was das Problem ist, aber mein Server gestartet wird, ist in der Lage Mock Daten zu füllen, und webpack kompiliert, so dass ich denke, die Backend-Werke.reagieren Router Version 4 nicht alles zeigt

Es tut mir so leid für die Wand des Codes, aber ich habe wirklich keine Ahnung, wo ich falsch liege und ich bin ein riesiger Neuling auf diesem Setup. Dies ist definitiv der längste Post, den ich jemals geschrieben habe, also schätze ich es, wenn jemand einen Blick darauf wirft.

My client/src/Routen:

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;

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> 
    ); 
    } 
}

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

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>

server/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 Skripte:

"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"

Quelle

2017-06-21 seanscal

Könnten Sie versuchen, 'Render() {

test

zurückkehren}' im App im Markup-Tag sollte es <% sein? Dies wird helfen, zu lokalisieren, wenn es ein Problem mit dem serverseitigen Rendern ist oder der Router – Grandas

Wird tun, wenn ich nach Hause komme, wird @grandas melden, danke! – seanscal

@Grandas Ich habe das getan und die Seite zeigt "Test", also denke ich, es ist ein Router/Frontend-Problem, wenn ich mich nicht irre? – seanscal

In Ihrem src/client/App.js Datei, bemerkte ich Sie syncHistoryWithStore von reagieren-Router-redux importieren. Ich bin ziemlich zuversichtlich, dass RR4 und die alte Version von react-router-redux nicht miteinander kompatibel sind. Die mit @next installierte neue Version enthält syncHistoryWithStore nicht.

Dies könnte Ihr Problem sein.

Quelle

2017-06-21 05:07:28 Strues

Ich füge meine package.json Abhängigkeiten, ich denke, es ist richtig, ich denke, das war nur alte Code – seanscal

bemerkt Nur etwas in diesem Codeblock

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; 
}

}

Sie sind ein leeres Objekt zu context zuweisen, einen leeren Rahmen auf Ihre <Router /> vorbei und überprüft dann für context.url und context.is404, die beide wird immer undefined sein, wenn Sie sie überprüfen! Vielleicht meintest du context = {...context}? Ich bin mir nicht sicher, ob dies Auswirkungen auf das Rendering hat (ziemlich sicher, dass es nicht funktioniert), aber es ist erwähnenswert.

Quelle

2017-06-27 15:01:06 DrunkDevKek

danke, ich habe es geändert, aber ich habe diesen Code als universal in der Regel nicht ausgeführt, so war es nicht der Übeltäter. Vielen Dank für den Rat, obwohl Sie es jetzt auschecken! – seanscal

Wenn Sie diesen Code nicht als universal ausführen, aktualisiert er das Markup nie und es wird immer leer sein, daher wird nichts gedruckt.

Eine kleine Korrektur in Ihrem Code: im Index.ejs

letzte entfernen '-' - Markup%>

Quelle

2017-06-28 07:54:50 Upasana

reagieren Router Version 4 nicht alles zeigt

Antwort

Verwandte Themen