React-router-dom navigate not rendering page - reactjs

Question

I am working on an app using useNavigate to go from page to page but am having trouble. Currently, the button click will cause the url to update, but the corresponding page doesn't render. Any help as to what I'm doing wrong?
Here is my button component:
import Fab from '#material-ui/core/Fab';
import AddIcon from '#mui/icons-material/Add';
import { useNavigate } from "react-router-dom";
const FabButton = () => {
let navigate = useNavigate();
return (
<div >
<Fab
onClick={() => navigate(`/add`)}>
<AddIcon />
</Fab>
</div>
)
};
export default FabButton;
My App.js:
import React from 'react';
import { Router, Routes, Route } from 'react-router-dom';
import history from '../history';
import AddPage from './AddPage';
import HomePage from './HomePage';
class App extends React.Component {
render() {
return (
<Router location={history.location} navigator={history} >
<Routes >
<Route exact path="/add" element={ <AddPage title="One Rep - Add" /> } ></Route>
<Route exact path="/" element={ <HomePage title="One Rep - Home" /> } ></Route>
</Routes>
</Router>
)
}
};
export default App;
My history.js:
import { createHashHistory } from 'history';
export default createHashHistory();
My AddPage.js:
export default AddPage;
import React, { useState } from 'react';
import Header from '../components/Header';
import { makeStyles } from '#material-ui/core/styles';
import { TextField, Button, InputAdornment } from '#material-ui/core';
const AddPage = () => {
const [moveData, setMoveData] = useState({ movementName:'', movementWeight: '' });
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<div>
<Header title={"Add Movement"} />
<div>
<form onSubmit={handleSubmit} >
<div>
<TextField
name="movementName"
variant="outlined"
label="Movement Name"
style={{ width:200 }}
value={moveData.movementName}
onChange={(e) => setMoveData({ ...moveData, movementName: e.target.value })}
/>
<TextField
name="movementWeight"
variant="outlined"
label="One Rep Max"
style={{ width:200 }}
value={moveData.movementWeight}
InputProps={{endAdornment: <InputAdornment position="end">lb</InputAdornment>}}
onChange={(e) => setMoveData({ ...moveData, movementWeight: e.target.value })}
/>
</div>
<div>
<Button
variant="contained"
type="submit"
fullWidth >
Submit
</Button>
</div>
</form>
</div>
</div>
);
};
export default AddPage;
I am using react-router-dom ^6.3.0

Answer 1

In react router v6+ you should use BrowserRouter instead of Router. You can see an example in their documentation
So, in your case it should look like this
<BrowserRouter>
<Routes>
<Route
exact
path="/add"
element={<AddPage title="One Rep - Add" />}
></Route>
<Route
exact
path="/"
element={<HomePage title="One Rep - Home" />}
></Route>
</Routes>
</BrowserRouter>
Here is minimal reproduction