'react router v6 - i am trying to add routes and keep getting a 404 [duplicate]

The homepage seems to work but the about page doesn't.

Here is my app.js file :-

import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Pages/Home'
import About from './Pages/About'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  )
}

export default App

Here is my index.js file

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
import './style.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

About page :-

import React from 'react'

function About() {
  return <div> THIS IS THE ABOUT PAGE</div>
}

export default About

It's being imported/exported correctly, and all the tutorials I'm following look like my code - so i'm not sure what to try next.



Solution 1:[1]

Solved - it was my webpack configuration. I was missing -

  devServer: {
    port: 3000,
    hot: true,
    open: true,
    historyApiFallback: true,
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kim