Routing mit React

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Hallo,

ich hoffe ich poste es im richtigen Bereich gepostet.

Ich habe ein problem beim verwenden von React auf meinem Server.
ich habe mir das erste Bsp. von https://reacttraining.com/react-router/web/guides/quick-start direkt auf meinen Server übernommen.
Wenn ich von meinem rechner aus die index.html auf dem Server aufrufe, erscheint nur eine leere seite. Es ist auch die index.html seite vom aus dem server
nur wird die app.js nicht auf die index.html übertragen, so dass ich ein "routing" habe.
Bin echt am verzweifeln was ich falsch mache.
 

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Der Browser zeigt eine leere Seite und die Konsole ist leer.
Unter Firefox--> Inspektor wird auch der Inhalt der index.html (Code) angezeigt.
In der index.html ist auch folgender Hinweis:

HTML:
<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
-->
Die index.js sieht wie folgt aus:

Javascript:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(

    <App />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Die App.js :

Javascript:
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
 
import './App.css';
 
class App extends React.Component {
 
  render()  {
    return  (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>
 
          <hr />
          <div className="main-route-place">
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
          </div>
        </div>
      </BrowserRouter>
    );
  }
 
}
 
class Home extends React.Component {
 
  render()  {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
}
 
class About  extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}
 
class Topics extends React.Component {
  render( ) {
    return (
      <div>
        <h2>Topics</h2>
        <ul>
          <li>
            <Link to={`${this.props.match.url}/rendering`}>
              Rendering with React
            </Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/components`}>Components</Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/props-v-state`}>
              Props v. State
            </Link>
          </li>
        </ul>
 
        <div className="secondary-route-place">
          <Route
            path={`${this.props.match.url}/:topicId`}
            component={Topic} />
          <Route
            exact
            path={this.props.match.url}
            render={() =>
              <h3>
                Please select a topic.
              </h3>
            }
            />
        </div>
      </div>
    );
  }
}
 
class Topic extends React.Component {
  render()  {
    return (
      <div>
        <h3>
          {this.props.match.params.topicId}
        </h3>
      </div>
    );
  }
}
 
export default App;
ISt das Beispiel aus folgender seite:

 

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Wenn ich npm run build starte bekomme ich folgende fehlermeldung in der konsole:

npm ERR! missing script: build
Wo müsste denn diese build script sein? In mejnem source Ordner? Und was müsste dort stehen, damit es funktioniert?
 
Zuletzt bearbeitet:

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Meine package.json sieht so aus:

JSON:
{
  "name": "demo-app",
  "version": "0.0.0",
  "description": "A simple example deployed using react-codesandboxer",
  "main": "index.js",
  "dependencies": {
    "react-router-dom": "latest",
    "react-scripts": "2.0.0",
    "react": "latest",
    "react-dom": "latest"
  }
}
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Dachte ich mir schon. Für npm run build müsste da so etwas stehen.
JSON:
{
    "scripts": {
        "build": "..."
    }
}
 
  • Like
Reaktionen: coldstone

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Ok, irgendeine empfehlung wo ich sowas "verständlich" nachlesen kann, wie so eine packet.json datei aussehen muss, damit die App lauffähig ist?
 

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Binde React doch als Script-Tag von einem CDN ein.

Oder besser noch: Besorg dir ein Webinar, welches alles Step-by-Step zeigt.

Hier wirst du sicher fündig:
https://www.udemy.com
 

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Ich habe jetzt mal mit Angular ein Project erstellt. Mit ng build --prod es kompiliert.
Habe das selbe Problem, das eine leere Seite rauskommt.
Dachte ich mir schon. Für npm run build müsste da so etwas stehen.
{
"scripts": {
"build": "..."
}
}
Wie muss der Pfad den nach dem "Build:" eingetragen sein?
Mein kompiliertes Projekt liegt im folgenden Pfad /dist/gamesworld/.
Habe schon "build": "/dist/gamesworld/" probiert, aber leider ohne erfolg.

Bekomme in der Console vom Browser solche Fehlermeldungen:

Laden des Moduls von "[URL='http://XXXXXXXXXXXXXXXXXX:XXXXXX/dist/dist/gamesworldruntime-es2015.3986682791907d19436a.js']http://XXXXXXXXXXXXXXXXX.de:XXXX/dist/dist/gamesworldruntime-es2015.3986682791907d19436a.js[/URL]" wurde auf Grund eines nicht freigegebenen MIME-Typs ("text/html") blockiert.

Dachte es liegt vielleicht an dem "content:Type" in meiner server.js.

Javascript:
var s = http.createServer(function(req, res) {
fs.readFile('./dist/gamesworld/index.html', function (err, data){
res.writeHead(200, {'[B]content-type':'text/htm[/B]l'});
res.write(data);
res.end();
});
})
s.listen(80);
Aber irgendwie klappt es nicht.
Wäre super nett wenn jemand irgendwie helfen kann. Bin echt schon am zweifeln.
 
Zuletzt bearbeitet:

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
ng build --prod und anschließend die Dateien aus dem dist Ordner auf deinen Server kopieren.
 

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
ng build --prod führe ich doch auf der Console im Server aus.
Ich führe es auf root/gamesworld/ aus. Somit habe ich im gamesworld Ordner den dist Ordner.
Meine index.html liegt dann im folgenden Pfad:
root/gamesworld/dist/gamesworld/index.html. Und auf diese verweise ich in meiner server.js.
Habe dann natürlich die ursprüngliche index.html auf root/gamesworld/index.html auch liegen.
Oder bin ich auf dem total falschen weg?
 

jonas3344

Neues Mitglied
25 Oktober 2019
28
12
3
37
Ja, wie Tronjer in #13 sagt.
ng build --prod lokal ausführen, alle Dateien im /dist Ordner auf den Server schieben. Und dann halt direkt den Pfad ansprechen.
 

jonas3344

Neues Mitglied
25 Oktober 2019
28
12
3
37
Und falls du unbedingt über Node das ganze ausliefern willst, hats hier jede Menge Ansätze:

Ist aber nicht soo trivial. Bei Dir dürfte es am Pfad liegen, denke ich. Er sucht unter /dist/dist und das dürfte falsch sein.
 

coldstone

Neues Mitglied
9 November 2018
13
0
1
39
Ja, wie Tronjer in #13 sagt.
ng build --prod lokal ausführen, alle Dateien im /dist Ordner auf den Server schieben. Und dann halt direkt den Pfad ansprechen.
Wenn ich einen build lokal erstelle, und über den Browser mit localhost, die Seite anzeige dann klappt es.
Wenn ich den lokal erstellten build, also den Inhalt des "dist" Ordners direkt auf den server packe und den Pfad auf die index.html stelle in der server.js, dann habe ich wieder eine leere Seite mit den Fehlern in der Konsole.

ich glaube dass der Fehler an der content-type':'text/html' im server.js liegt, weil in der Konsole die Fehler auch darauf hinweisen, nur was kommt anstatt text/html dort hin?

Es gibt hier eine Liste der verschiedenen MIME-types https://wiki.selfhtml.org/wiki/MIME-Type/Übersicht.
Nur sind diese immer speziell für bestimmte Dateien. Nicht globales für eine App oder so.