REACT gibt nur leere seite aus

coldstone28

Mitglied
Hi,

ich habe folgendes Problem.
Habe auf einem server ein REACT Projekt App gestartet.
Und einen Beispiel Projekt 1 zu 1 übernommen um zu gucken ob es überhaupt läuft.
Nur bekomme ich auf meinem Rechner nur eine leere Seite angezeigt.

Hier mal die dateien:
/public/index.html:
Javascript:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Test</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
     </body>
</html>


src/test.html
Javascript:
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

src/test.js
Javascript:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

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

Wenn ich in der index.html eine text schreibe, wird dieser auch auch im Browser ausgegeben.
Aber Home, About und Dashboard werden nicht in die index.html eingefügt.

Muss man für dia ausgabe noch was einstellen?
Oder kennt jemand vielleicht eine andere und einfachere routing methode wür eine webapp?
Habe auch mir mal Angular angeguckt, kam mir komplizierter vor als REACT.

Viele dank im voraus
 
Zurück