react router v6 - i am trying to add routes and keep getting a 404

Question

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.

I can't reproduce your issue (I just copied you code into a sandbox and it is working). Could you please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — TheTisiboth, Mar 09 '22 at 10:49
I got it thank you. I was missing the "historyApiFallback: true" in my webpack config. — Kim, Mar 09 '22 at 10:58

score 0 · Answer 1 · answered Mar 09 '22 at 10:59

0

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

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

answered Mar 09 '22 at 10:59

Kim

70
1
9

react router v6 - i am trying to add routes and keep getting a 404

1 Answers1