react-router-dom v6으로 404 페이지를 작성하는 방법

react-router-dom v6으로 404 페이지를 작성하는 방법

루트를 정리하고 싶어서 리액션루터돔을 위해 v6베타로 업그레이드했는데 404 페이지가 깨졌다.

export function AllRoutes(props) {

  return(
    <Routes>

      <Route path="/about-us">
        <Route path="contact">     <AboutContact/> </Route>
        <Route path="our-logo">    <AboutLogo/>    </Route>
        <Route path="the-mission"> <AboutMission/> </Route>
        <Route path="the-team">    <AboutTeam/>    </Route>
        <Route path="our-work">    <AboutWork/>    </Route>
      </Route>

      <Route path="/user">
        <Route path="sign-in"> <UserSignIn/> </Route>
        <Route path="sign-up"> <UserSignUp/> </Route>
      </Route>


      <Route path="/">
        <Home/>
      </Route>

      <Route >
        <NotFound/>
      </Route>

    </Routes>
  )
}

따라서 추가해도 작동하지 않는 미발견 페이지를 제외한 모든 것이 예상대로 작동(홈페이지 포함)한다.path="/*"또는path="*"

쉬운 해결책은?

<Routes>

  // Use it in this way, and it should work:
  <Route path='*' element={<NotFound />} />

  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

Ract Router v6는 정확한 경로와 일치하도록 정확한 속성을 사용하지 않는다.기본적으로 정확한 경로와 일치한다.값을 일치시키려면 경로 경로에 "*"를 사용하십시오.

  <BrowserRouter>
    <div className="App">
      <Header />
    </div>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>    enter code here

Route를 *의 경로로 렌더링하기만 하면 되며, Raction Router는 다른 Route 중 일치하는 항목이 없는 경우에만 요소를 렌더링할 수 있다. (404 구성 요소 이름이 PageNotFound인 경우)

<경로="*" 요소={<PageNotFound/>} />

1 Stackblitz 링크(이러한 구현 방식이 조금 다름)

2- 가장 쉬운 예는 여기 입니다.

참조URL: https://stackoverflow.com/questions/67050966/how-to-build-a-404-page-with-react-router-dom-v6