react router dom v6 doesnt redirect to not found-CodePudding

so I just migrated from react-router-dom v5 to v6.

As I understand, exact doesn't exist anymore because it is omitted. But in my case it doesn't work.

If the route isn't found, it should redirect to not-found page, but can't figure out why it is not working. It just prints me a white page...

So, this is my BrowerRouter :

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<AboutUs />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/publish-article" element={<WriteArticle />} />
      <Route path="/search-article" element={<Search />} />
      <Route path="/article/:id" element={<Article />} />
      <Route path="/quizz" element={<Quizz />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/profile/:username" element={<UserProfile />} />
      <Route path="/profile-settings" element={<ProfileSettings />} />
      <Route path="/not-found" element={<NotFound />} />
      <Route element={<NotFound />} />
    </Routes>
  </BrowserRouter>

Does anybody know what did I miss ?

CodePudding user response：

You still need a path for your not found Route and just have it as a wildcard.

<Route path="*" element={<NotFound />} />

But if you are actually wanting the url to redirect to not-found then just have the Navigate component in there

import { Navigate } from 'react-router-dom'

<Route path="*" element={<Navigate to="not-found"/>} />