CODEWITHSUNDEEP
javascriptreactjs
Bram
Bram

Reputation: 43

React not displaying anything

I set up a new react project with "npx create-react-app name". I tried to clean all of the files I didn't need, except for the ones that were necessary of course, but now nothing displays. I've had trouble with react-router and routes when it didn't work too.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>KassaSysteem</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

App.js

import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Login from './pages/Login';

function App() {
  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route path="/" exact component={Home}/>
          <Route path="/login" component={Login}/>
        </Routes>
      </div>
    </Router>
  );
}

const Home = () => {
  <form>
    <input type="email" placeholder='your email here'/>
    <input placeholder='displayname'/>
    <input type="password" placeholder='your password here'/>
  </form>
}

export default App;

Login.js

import React from 'react'

function Login() {
    return (
        <div>
            <h1>login</h1>
        </div>
    )
}

export default Login

These are all of the files I have, except for the CSS files. If anyone knows what I am doing wrong, please comment.

Upvotes: 0

Views: 15519

Answers (3)

17 year old boi
17 year old boi

Reputation: 1

top left corner in which my pointer is pointing , it shows form a connection to local host to my newly created component oof glad i found it quickly

top left corner in which my pointer is pointing , it shows form a connection to local host to my newly created component! glad i found it quickly . My react app is visible in chrome after doing this, Hope this helps :)

Upvotes: 0

Ramesh Inumula
Ramesh Inumula

Reputation: 36

install react-router-dom old version that is 5.2.0,

or you can run npm i [email protected] and restart your server that means npm start and its worked and Your home component should be like this.

const Home = () => {
return(      
<form>
    <input type="email" placeholder='your email here'/>
    <input placeholder='displayname'/>
    <input type="password" placeholder='your password here'/>
 </form>
)
}

Upvotes: 1

Amanullha Zoha
Amanullha Zoha

Reputation: 149

if you use the latest version (v6) you use this code

import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Login from './pages/Login';

function App() {
  return (
    <Router>
      <div className='App'>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />}/>
        </Routes>
      </div>
    </Router>
  );
}

function Home () {
  return (
    <form>
        <input type="email" placeholder='your email here'/>
        <input placeholder='displayname'/>
        <input type="password" placeholder='your password here'/>
  </form>
  )
}

export default App;

Upvotes: 1

Related Questions