'How manage express routes with param?

I have a basic question but it block me from 2 days now. I'm learing NodeJs. I'm facing a problem that I didn't meet in dev mode. So I'm confuse.

I have two routes on my server.js

const governmentCreateRouter = require('./routes/GovernmentCreate');
app.use("/governmentCreate", governmentCreateRouter);

app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

If I understand how it work when I use this url https://mondomaine/GovernmentCreate, express catch with app.use("/governmentCreate", governmentCreateRouter); my url and route to ./routes/GovernmentCreate.

GovernmentCreate.js

const express = require('express');
const router = express.Router();
const { GovernmentCreate } = require('../models');

router.get("/", async (req, res) => {
    //some code
});

router.get("/byId/:id", async (req, res) => {
 //some code
});

router.post("/", async (req, res) => {
  //some code
});

Now, I have a page name GovernmentId.js

const [governmentList, setGovernmentList] = useState([]);

let { id } = useParams();

useEffect(() => {

    axios.get(`https://monDomain/governmentCreate/byId/${id}`)
        .then((res) => {

            setGovernmentList([res.data]);

        }).catch((err) => {
            console.log(err);
        });
}, []);

//return ...code

This page is call with url https://monDomain/gouvernement/:id. the :id is a number that allow to search index in my database.

app.js

<BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/a-propos" element={<About />} />
            <Route path="/gouvernement/:id" element={<GovernmentId />} />
          </Routes>
</BrowserRouter>

But when I put this url in my browser, it return me an error

enter image description here

La feuille de style https://www.mon-gouvernement.fr/gouvernement/static/css/main.3eea6a9b.css n’a pas été chargée car son type MIME, « text/html », n’est pas « text/css ».
Le script à l’adresse « https://www.mon-gouvernement.fr/gouvernement/static/js/main.02a475ac.js » a été chargé alors que son type MIME (« text/html ») n’est pas un type MIME JavaScript valide.
Uncaught SyntaxError: expected expression, got '<'

I understand that my url (https://monDomain/gouvernement/:id) is catched by .get('/*' on my server.js. But why it don't return html, css, js page and after actived the useEffect ?

node.jsexpress


Solution 1:[1]

I solve my issu with the code below. I add into my package.json this line

"homepage": "https://www.mon-gouvernement.fr/",

Solution 2:[2]

Looks like a rendering problem to me, since if you follow links it actually works. Here is what I mean:

This is a problem that occurs also in other frameworks, and I believe that the Update number 2 in this question can help you solve your issue.

Edit 1

You have to modify your app.js file:

import { createBrowserHistory } from 'history';
import { useRouterHistory } from 'react-router';

const history = useRouterHistory(createHistory)({
    basename: '/' 
});

// ...other code

<BrowserRouter history={history}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/a-propos" element={<About />} />
            <Route path="/gouvernement/:id" element={<GovernmentId />} />
          </Routes>
</BrowserRouter>

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
Solution 2

Related Questions