Showing blank page after npm start
, the browser did not show any error message.
import {
createBrowserRouter,
RouterProvider,
Route,
Outlet,
} from "react-router-dom";
import './App.css';
import * as React from "react";
import Register from "./pages/Register"
import Login from "./pages/login"
import Write from "./pages/Write"
import Home from "./pages/home"
import Single from "./pages/single"
import Footer from './components/Footer';
import Navbar from './components/navbar';
import "./project.scss"
const main = () => {
return (
<div>
<Navbar />
<Outlet />
<Footer />
</div>
)
};
const router = createBrowserRouter([
{
path: "/",
element: <main />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/post/:id",
element: <Single />,
},
{
path: "/write",
element: <Write />,
},
],
},
{
path: "/register",
element: <Register />,
},
{
path: "/login",
element: <Login />,
},
])
function App() {
return (
<div className="app">
<div className='container'>
<RouterProvider router={router} />
</div>
</div>
);
}
export default App;
Also I get this warning message in the VS Code:
WARNING in [eslint] srcApp.js Line 4:3: 'Route' is defined but never used no-unused-vars Line 21:7: 'main' is assigned a value but never used no-unused-vars
I am also get lost on this. How the main
is not used?
I have tried multiple solutions that I have found but none of them have worked yet. I know it is the path issue, but don’t know how to get it working. I want to keep the children
elements.