The project does not start because of / at the end of the address bar, why?

Question

React

I'm doing a video project, I set up webpack itself, on the video project through create react app, the essence of the problem, on the video is localhost3001, I'm on 8080. When / 123412421 is added to the address bar on the video, the file remains the same, it is registered in BrowserRouter> Route path='/', everything is the same for me, but when I add something to my line, it immediately says cannot get /5, what is the reason for this?

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import './scss/app.scss';
import App from './app.js';

ReactDOM.render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>,

  document.getElementById('root'),
);

I figured out localhost by adding it to webpack

devServer: {
    historyApiFallback: true,
  }

But if you start production and run index.html, then nothing happens if you make the exact path, it does not load the component, what is the reason for this?

Answer 1

In short, I solved the problem, suddenly someone needs it. Removed BrowserRouter, installed Router, added history there

import { createHashHistory } from 'history'

export default createHashHistory()

Answer 2

Here's an example of using a movie id in an address string.
That is, you specify a colon and the id of the variable in which your id will be entered, and then in the component you used, you get this id through props.match.params.idfilm

<Router>
        <Suspense fallback={<div>Загрузка...</div>}>
          <Switch>
            <Route exact path='/film/:idfilm' component={Film}/>
          </Switch>
        </Suspense>
</Router>