CODEWITHSUNDEEP
reactjs
Leonardo Rodrigues
Leonardo Rodrigues

Reputation: 53

React app not displaying anything but a black screen

I set up a new project with react but all I get is a blank screen. Am I making a mistake when importing/exporting my code? Do I need to use index.html to import my index.js?

App.js

import Navbar from './Components/Navbar';
import Home from './Components/Home';
import Login from './Components/Login';
import Register from './Components/Register';
import CreatePost from './Components/CreatePost';
import AllPost from './Components/AllPost';
import NotFound from './Components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
        <Navigate from='/CreatePost' to='/Register' />
          <Route exact path='/' component={Home}>
            <Home />
          </Route>

          <Route exact path='/Register' component={Register}>
            <Register /> 
          </Route>

          <Route exact path='/Login' component={Login}>
            <Login />
          </Route>

          <Route exact path='/CreatePost' component={CreatePost}>
            <CreatePost />
          </Route>

          <Route exact path='/AllPost' component={AllPost}>
            <AllPost />
          </Route>

          <Route component=
            {NotFound}>

          </Route>

          

        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

index.js

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


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

It's worth mentioning I am not getting any errors and my components seem do be working properly

Upvotes: 0

Views: 997

Answers (1)

Nikita.S
Nikita.S

Reputation: 31

You are doing just a small mistake here

Change this

<Route exact path='/AllPost' component={AllPost}>
        <AllPost />
      </Route>

To this

<Route exact path='/AllPost' element={<AllPost/>}>
</Route>

Do this with every Route See if it works

Upvotes: 1

Related Questions