No Routes Matched Location "/" solution 문제해결[20220930 TIL]

No Routes Matched Location "/" solution 문제

 

어제까지만 해도 로그인 기능 구현을 다 구현하고 오늘은 작업 마무리를 하고 발표를 하는 도중 개발자 도구에 계속

No Routes Matched Location "/login"  

이라는 문구가 뜨며 작동이 되지 않았다.

 

스택오버 플로우를 찾아보니 주로

 

이중 Route 문제 일 가능성이 높다?

주어진 곳에서 Route를 중복으로 사용하면 나타나는 오류라는 말이 있어 전부 다 찾아보았는데 그런일은 없었다.

 

This is very common issue among developer due to version change of react-route

찾아보니 리액트 루트의 버전 변경으로 이런일이 잦다고 한다.

 

해결법

 

function App() {
  return (
    <Router>
      <Routes>
        <Route index element={<HomePage />} />
        {/* you ^ can add `index` prop to make it default route*/}
        <Route path="/contact" element={<ContactPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
}

위와 같이 나오지 않는 "/"부분에 index element라고 하면 된다고 한다.

 

return (
    <ThemeProvider theme={theme}>
      <Reset />
      <GlobalStyle />
      <Header />
      <Main>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/account" element={<AccountPage />} />
          <Route path="/transfer" element={<TransferPage />} />
          <Route path="/transactions" element={<TransactionsPage />} />
        </Routes>
      </Main>
    </ThemeProvider>
  );

나는 위와 같이 해결했다.

 

** 근데 다시 원래로 되니까 원래도 되네..?

 

참조 문헌

https://coderecharge.com/reactjs/react-route/react-js-error-no-routes-matched-location-solution

No Routes Matched Location