react-router v6 still can't distinguish '/' and '/*'-CodePudding

I installed "react-router-dom": "^6.0.2". And I heard that from v6, we don't need to use 'exact'

import React from "react";
import { HashRouter, Routes, Route } from "react-router-dom";
import Home from "./screens/Home";
import Login from "./screens/Login";
import NotFound from "./screens/NotFound";

function App() {
  const isLoggedIn = false;
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={isLoggedIn ? <Home /> : <Login />} />
        <Route path="/agree" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

so I don't use 'exact' with path='/'. but when I access through path '/agree' below, it still shows '/' website, which means it can't distinguish '/' and '/agree' even in v6. And even if I use exact here, it doesn't work. (probably because it's version 6? but why can't it distinguish them?)

please help me.

CodePudding user response：

You are using HashRouter. Try adding this to your URL /#/about or change to BrowserRouter. The issue here is that you are entering /about which is not recognized by Router, cause it should be /#/about and that is the reason why it keeps showing you / page, which is in this case, considered 404 page.