react route links cannot match js file-CodePudding

I followed a tutorial in w3school for routing, but the import part doesn't work and it returns an error error. This is the folder structure app structure and index file code below.

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Pages } from 'react';
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

CodePudding user response：

I think the issue is not with the react but you forgot to add extensions in the webpack config.
Refer : https://webpack.js.org/configuration/resolve/#resolveextensions
Eg. :

resolve: {
      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    }

CodePudding user response：

 <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="blogs" element={<Blogs />} />
      <Route path="contact" element={<Contact />} />
      <Route path="*" element={<NoPage />} />
    </Route>
  </Routes>

Instead of writing like that, try this:

<Routes>
    <Route>
      <Route path="/" element={<Home />} />
      <Route path="/blogs" element={<Blogs />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="*" element={<NoPage />} />
    </Route>
</Routes>

Btw, what's layout for? I think it's that making the error