what is the best way to do this, like files, organization, would it be better to abandon the router? or would the pages be more optimized if they were done another way?

app.tsx:
import "./App.css";
import Cadastrar from "./Cadastrar";
import Home from "./Home"
import { Routes, Route} from "react-router-dom";
import CadastrarClientesFisica from "./Cadastrar/Clientes-Fisica";

function App() {
  return (
    <div>

      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/cadastrar" element={<Cadastrar />} />
        <Route path="/Cadastrar/Clientes-Fisica" element={<CadastrarClientesFisica />} />
      </Routes>
    </div>
  );
}
export default App;


Cadastrar.tsx:
import "./Cadastrar.css"
import "./App.css";
function Cadastrar(){
    return(
        <div className="container">
            <div className="row">
            <div className="Item a">
                        <a href="./Cadastrar/Clientes-Fisica">
                        <img className="logo importar" src="./Cadastrar/Clientes.svg" />
                        <p>Clientes</p>
                        </a>
                        </div>
            <div className="Item a">
                        <a>
                        <img className="logo importar" src="./Cadastrar/Fornecedores.svg" />
                        <p>Fornecedores</p>
                        </a>
                        </div>
            <div className="Item a">
                        <a>
                        <img className="logo importar" src="./Cadastrar/Produto.svg" />
                        <p>Produtos</p>
                        </a>
                        </div>
            <div className="Item a">
                        <a>
                        <img className="logo importar" src="./Cadastrar/Imposto.svg" />
                        <p>Imposto</p>
                        </a>
                        </div>
            <div className="Item a">
                        <a>
                        <img className="logo importar" src="./Cadastrar/Preço.svg" />
                        <p>Preço</p>
                        </a>
                        </div>      
                <div className="Item a">
                        <a>
                        <img className="logo importar" src="./Cadastrar/Distribuidores.svg" />
                        <p>Distribuidores</p>
                        </a>
                        </div>
                <div className="Item a">
                    <a>
                    <img className="logo importar" src="./Cadastrar/Fabricantes.svg" />
                    <p>Fabricantes</p>
                    </a>
                    </div>
                <div className="Item a">
                    <a>
                    <img className="logo importar" src="./Cadastrar/NCM.svg" />
                    <p>NCM</p>
                    </a>
                    </div>
                <div className="Item a">
                    <a>
                    <img className="logo importar" src="./Cadastrar/Personalizado.svg" />
                    <p>Campos Perso.</p>
                    </a>
                    </div>
          </div>  

            <div className="Voltar">
                <a href="./">Voltar</a>
            </div>
        </div>
        )        
}
export default Cadastrar;


home.tsx:
import "./App.css";
function Home() {
return(
<div className="container">
    <h1>Importação e Venda</h1>

    <div className="row">
        <div className="Item">
            <a href="">
            <img className="logo importar" src="/importar.svg"/>
            <p>Importar</p>
            </a>
        </div>
        <div className="Item">
            <a href="./Cadastrar"   >
            <img className="logo importar" src="/cadastrar.svg"/>
            <p>Cadastrar</p>
            </a>  
        </div>
        <div className="Item">
            <a href="#"   >
            <img className="logo importar" src="/listar.svg"/>
            <p>Listar</p>
            </a>
        </div>
        <div className="Item">
            <a href="#"   >
            <img className="logo importar" src="/orcamento.svg"/>
            <p>Orcamento</p>
            </a>  
        </div>
    </div>
</div>
  );
  }
export default Home;


main.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);


App.css  App.tsx  assets  Cadastrar  Cadastrar.css  Cadastrar.tsx  Home.tsx  main.tsx  vite-env.d.ts