I'm trying to start using flowbite to use they inbuilt components, I already had a small application which was configured something like this for routing:
This is my main.jsx file.
import * as React from 'react';
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import App from './App';
import './main.css';
import Expenses from './routes/expenses';
import Invoice from './routes/invoice';
import Invoices from './routes/invoices';
ReactDOM.createRoot(document.getElementById("app")).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="/expenses" element={<Expenses />} />
<Route path="/invoices" element={<Invoices />}>
<Route
index
element={
<main style={{ padding: '1rem' }}>
<p>Select an invoice</p>
</main>
}
/>
<Route path=":invoiceId" element={<Invoice />} />
</Route>
<Route
path="*"
element={
<main style={{ padding: '1rem' }}>
<p>There's nothing here!</p>
</main>
}
/>
</Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
);And in this is my App.jsx file:
import { Accordion, Avatar, Dropdown, Navbar } from "flowbite-react";
import { NavbarCollapse } from "flowbite-react/lib/esm/components/Navbar/NavbarCollapse";
import * as React from "react";
import { Outlet, Link } from "react-router-dom";
import profileImage from "./assets/profile-picture-3.jpg";
export default function App() {
// set the target element that will be collapsed or expanded (eg. navbar menu)
const targetEl = document.getElementById("targetEl");
return (
<Navbar
fluid={true}
rounded={true}
>
<Navbar.Brand href="https://flowbite.com/">
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<div className="flex md:order-2">
<Dropdown
arrowIcon={false}
inline={true}
label={<Avatar alt="User settings" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true}/>}
>
<Dropdown.Header>
<span className="block text-sm">
Bonnie Green
</span>
<span className="block truncate text-sm font-medium">
name@flowbite.com
</span>
</Dropdown.Header>
<Dropdown.Item>
Dashboard
</Dropdown.Item>
<Dropdown.Item>
Settings
</Dropdown.Item>
<Dropdown.Item>
Earnings
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>
Sign out
</Dropdown.Item>
</Dropdown>
<Navbar.Toggle />
</div>
<Navbar.Collapse>
<Navbar.Link
href="/navbars"
active={true}
>
Home
</Navbar.Link>
<Navbar.Link href="/expenses">
Patients
</Navbar.Link>
<Navbar.Link href="/navbars">
Services
</Navbar.Link>
<Navbar.Link href="/navbars">
Pricing
</Navbar.Link>
<Navbar.Link href="/navbars">
Contact
</Navbar.Link>
</Navbar.Collapse>
</Navbar>
// <div>
// <h1>Bookkeeper</h1>
// <nav style={{ borderBottom: 'solid 1px', paddingBottom: '1rem' }}>
// <Link to="/invoices">Invoices</Link> |{' '}
// <Link to="/expenses">Expenses</Link>
// </nav>
// <Outlet />
// </div>
);
}I made the changes to "route" to /expenses, and my project reloads or something but is never showing anything on screen, so... not sure how flowbite works for routing, can anybody help me please?
