[C#, React] no routes matched location react 해결방법

C# .net 8.0 과 react 18.2.0 에서 no routes matched location react 에러 해결 방법

App.jsx 에서 Router 설정을 제대로 했나 확인해 보자.

//수정전
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from "./components/layout/layout";
import LoginPage from "./pages/login/loginPage";
import './App.css';
import FeeRegulationManagementPage from './생략';
import ClassManagement from './생략';

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route>
                    <Route path="/생략" element={<Layout><FeeRegulationManagementPage /></Layout>} />
                    <Route path="/생략" element={<Layout><ClassManagement /></Layout>} />
                </Route>
            </Routes>
            <Routes>
                <Route path="/" element={<LoginPage />} />
            </Routes>
        </BrowserRouter>
    )
};

//수정후
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from "./components/layout/layout";
import LoginPage from "./pages/login/loginPage";
import './App.css';
import FeeRegulationManagementPage from './생략';
import ClassManagement from './생략';

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route>
                    <Route path="/생략" element={<Layout><FeeRegulationManagementPage /></Layout>} />
                    <Route path="/생략" element={<Layout><ClassManagement /></Layout>} />
                </Route>
                <Route path="/" element={<LoginPage />} />
            </Routes>
        </BrowserRouter>
    )
};

<BrowserRouter> 컴포넌트 내에서 <Routes>를 한 번 사용해야 하는데 두번 사용해서 생긴 문제였다.

Layout을 저렇게 넣은 건... 비효율적이라는 것을 알지만 <Route>에 element로 넣었을 때 제대로 작동되지 않아 우선적으론 저렇게 넣어두었다...