Component Doesn't Show Up & React JS

Question

There is a problem about my compenent, that is it doesn't show up? It's a first I'm doing a website project and using JS and React, so I don't know really what is the deal... I am even trying to learn by copying codes from tutorials, I always had done it like this before, when I wanted to learn something. But there is not an error or something and yet, it doesn't show up when I run the project at all.

Here is...

App.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { CssBaseline, Container, Grid, AppBar, Toolbar, Typography, Button, IconButton } from "@material-ui/core";
import PenIcon from "@material-ui/icons/Create"
import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import PostsList from "./components/PostsList";
import AddPostForm from "./components/AddPostForm";

. . .

 <Routes>
            <Route exact path="/posts" element={<PostsList/>}/>
          </Routes>

and

PostList.js

import React from 'react'

const PostsList = () => {
  return <div>PostsList</div>
};

export default PostsList;

Edit: I added the part I used PostsList to App.js And my problem solved when I exchange from "component" to "element" and add < /> sides of PostsList.

Answer 1

Use it like,

<Route exact path="/posts" component={PostsList} />

or

<Route exact path="/posts">
   <PostsList/>
</Route>

Answer 2

You show us only the imports from you App.js file, but to render a component is not only import the file, but also write it between return()
Try to write in your App.js:

const App = () => {
    return(
        <div className="App">
            <PostLists />
        </div>
    )
}

Answer 3

that's because you just imported your components, you should display it in your App.js like below

const App = () => {
    return(
        <div className="App">
            <PostLists />
        </div>
    )
}