Upgraded everything, hashbrowser, making my router refresh correctly
Many things were attempted, fixes to the back
var path = require(‘path’);
var SRC_DIR = path.join(__dirname, ‘/client/src’);
var DIST_DIR = path.join(__dirname, ‘/client/dist’);
module.exports = {
mode: ‘development’,
entry: `${SRC_DIR}/index.js`,
output: {
filename: ‘bundle.js’,
path: DIST_DIR,
publicPath: “/”,
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.(js|jsx)?/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
options: {
presets: [
“@babel/preset-env”,
“@babel/preset-react”
],
plugins: [
[“@babel/plugin-transform-runtime”,
{
“regenerator”: true
}
]
]
}
}
},
{
test: /\.css$/,
use: [
‘style-loader’,
‘css-loader’
]
},
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 10000
}
}
]
}
]
}
};
Did not work, they said the problem was historyApiFallback: true,
But that was not it. In the end, instead of using browserrouter, which is garbage and the tutorial gave no instruction on, I used hashrouter
// import * as React from ‘react’;
// import * as ReactDOM from ‘react-dom’;
// import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
// import App from ‘./components/App.jsx’;
import Expenses from “./components/routes/expenses.jsx”;
import Invoices from “./components/routes/invoices.jsx”;
import Invoice from “./components/routes/invoice.jsx”;
import ‘./main.css’;
import { HashRouter } from ‘react-router-dom’
import React from “react”;
import ReactDOM from “react-dom”;
import { BrowserRouter } from “react-router-dom”;
import { Router, Route, Routes, IndexRoute } from ‘react-router’
import “./main.css”;
import App from ‘./components/App.jsx’;
ReactDOM.render(
<HashRouter >
<Routes>
<Route path=”/” element={<App />}>
<Route path=”expenses” element={<Expenses />} />
<Route path=”ryuutama” element={<Invoices />}>
<Route
index
element={
<main style={{ padding: ‘1rem’ }}>
<p>Select an invoice</p>
</main>
}
/>
<Route path=”:invoiceId” element={<Invoice />} />
</Route>
<Route
path=”*”
element={
<main style={{ padding: ‘1rem’ }}>
<p>There’s nothing here!</p>
</main>
}
/>
</Route>
</Routes>
</HashRouter>,
document.getElementById(“app”)
);
A # shows up but what you do?
