component를 위한 js를 한개에 몰아서 만들어도 괜찮을까요?

안녕하세요. 리액트 강의 잘 듣고있는 이직 준비생입니다.
제가 코딩 스타일이 js를 여러개 만들지 않고 한 곳에 좀 몰아서 필요할 때만 꺼내쓰는 타입인데, ajax를 듣고있는 현재까지는 오류 없이 잘 따라가고 있지만
강의의 방식과 약간 달라서 이렇게 해도 괜찮을지 여쭤봅니당

import './App.css';
import compUtil from "./util/component";
import { Routes, Route, useNavigate } from "react-router-dom";

const App = () => { 
  const navigate = useNavigate();
  return (
    <div className="App">
      <compUtil.GetHeader NavigateState={ navigate }/>
      <div className='main-bg'></div>
      <Routes>
        <Route path="/" element={ <compUtil.GetMainPage NavigateState={ navigate } /> } />
        <Route path="/detail/:id" element={ <compUtil.GetProductDetail /> } />
        <Route path="/login" element={ <compUtil.GetLoginPage /> } />
        <Route path="/join" element={ <compUtil.GetJoinPage /> } />
        <Route path="/*" element={ <div>잘못 들어오신거 같은데요?</div> } />
      </Routes>
    </div>
   );
}
export default App;
이런식으로 component.js 한 곳에서 관리를 하는데 한 js에서 관리하다보니 state관리도 좀 하드코딩 방식인거 같고.. 오류는 나지 않지만
잘못된 방식이라면 나중에 꽤 진행됐을 때 걷잡을 수 없을것 같아 얼마 진행되지 않은 지금 질문드립니다.