Why the slash is added to a particular url?

Question

I'm coming back to you after a problem I'm having with redirects in React, I've decided to resume my project from 0 and I'm still having the same problem..

When I request this page http://localhost:3000/profil I am automatically redirected to this same page with a slash at the end of the url, e.g. http://localhost:3000/profil/.

Why does the / appear automatically at the end of the url http://localhost:3000/profil/? I'm not asking anywhere.

For the test, the Profil page and the Home page are exactly the same and should return the same image, except that only the Home page returns the image.

Here is the code I am using

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles/index.scss'

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

src/App.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Routes from './components/Routes';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </div>
  )
};

export default App;

src/components/Routes/index.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from '../../pages/Home';
import Panier from '../../pages/Panier';
import Profil from '../../pages/Profil';

const index = () => {
    return (
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/profil' element={<Profil />} />
                <Route path='/mes-paniers' element={<Panier />} />
                <Route path='*' element={<Home />} />
            </Routes>
    )
};

export default index;

src/pages/Profil

import React from 'react';

const Profil = () => {
    return (
        <div className="profil-page">
            <div className="log-container">
                <div className="img-container">
                    <img src="./img/log.svg" alt="pic-profil" />
                </div>
            </div>
        </div>
    )
};

export default Profil;

The Home page looks like the Profil page,

src/pages/Home

import React from 'react';

const Home = () => {
    return (
        <div className="profil-page">
            <div className="log-container">
                <div className="img-container">
                    <img src="./img/log.svg" alt="pic-profil" />
                </div>
            </div>
        </div>
    );
};

export default Home;

The image is not found on "/profil/" while on "/home" it is displayed.

I don't understand where the problem comes from.

Answer 1

The problem seems solved to me. I had to reset the default settings of Google Chrome. I can now load my page /profil and no longer /profil/!

EDIT : It still doesn't work on Brave browser. Can't get just the url http://localhost:3000/profil . It always sends me /profil/.