basic components not rendering-CodePudding

I'm just starting my first react web app but my components are not rendering. even a simple h1 element directly in the app.js file is not rendering. it did, however, after deleting the Routes, so my best guess is that the problem lies somewhere there. the code:

app.js

import React, { lazy, Suspense } from 'react'
import './App.css';
import { Routes, Route } from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

const Home = React.lazy(() => import('./pages/Home'))


const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <h1>App</h1>
      <ToastContainer />
      <Routes>
          <Route exact path="/" element={Home} />
      </Routes>
    </Suspense>
  )
}

export default App;

Home.js

import React from 'react'

const Home = () => {
    return (
        <h1>Home Page</h1>
    )
}

export default Home

sorry for this very beginner question. please keep in mind that this is my first react web app.

CodePudding user response：

React route accepts ReactElement not ReactNode, no need of exact also

  <Routes>
      <Route path="/" element={<Home />} />
  </Routes>

CodePudding user response：

I think that the tutorial you are using uses the previous react-router API. Please, try this:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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