React Router 6 in Electron - No routes matched location

Question

I am trying to use react-router v6 in an electron js application.

but it doesn't work for me.

This App works correctly without implementing the react-router!

When I use the react-router v6, I will get this message in the console, and doesn't show the content

No routes matched location

Project Structure

In this Project, index.html file loads the app.js inside the build folder.

index.js

App.jsx

    import React from "react";
    import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
    import { Home, Blog } from "./pages";
    import "./App.scss";

    const Application = () => {
      return (
        <Router>
          <nav id="navigation">
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/blog">Blog</Link>
              </li>
            </ul>
          </nav>
          <div id="content">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/blog" element={<Blog />} />
            </Routes>
          </div>
        </Router>
      );
    };

    export { Application };

Answer 1

Try to use HashRouter instead of BrowserRouter

https://reactrouter.com/docs/en/v6/api#hashrouter