javascript - 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 ponent={Home}/>
          <Route path="/login" ponent={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;

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 ment.

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 ponent={Home}/>
          <Route path="/login" ponent={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;

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 ment.

Share Improve this question edited Dec 24, 2021 at 16:14 General Grievance 5,04338 gold badges37 silver badges56 bronze badges asked Dec 24, 2021 at 11:17 Bram 431 gold badge2 silver badges6 bronze badges

when you run your app there is not any error ? – HDM91 Commented Dec 24, 2021 at 11:25
Nothing, no error just no display – Bram Commented Dec 24, 2021 at 11:29
1 Home doesn't return anything? – Kokodoko Commented Dec 24, 2021 at 11:32
doesn't help, login does return something. Is there something wrong with the routers and routes? – Bram Commented Dec 24, 2021 at 11:33
if you delete router still it would not work ? just return some simple ponent in App – HDM91 Commented Dec 24, 2021 at 11:35

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 1

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

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;

top left corner in which my pointer is pointing , it shows form a connection to local host to my newly created ponent 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 ponent! glad i found it quickly . My react app is visible in chrome after doing this, Hope this helps :)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React not displaying anything - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)