Why doesn't nested route match?

Question

React

Such a problem. There are two routes for example: "/movies" & "/movies/:id". If you switch to the second route from the first one (using Link), then everything works fine. But if you drive in the URL directly, for example /movies/1, then I get an error in the console that it is not found. Also, if the route is "/movies/search" for example, then /movies opens and /movies/search does not. Why is this happening?
Routes:

const routes = [
  {
    path: "/",
    component: () => <Link to="/movies/1">View card</Link>, //для примера тут хардкод
    exact: true
  },
  {
    path:"/movies",
    component: MoviesList,
    exact: true
  },
  {
    path: "/movies/:id",
    component: MovieView,
    exact: true
  }
];

Render routes:

class PageWrap extends React.Component {
  renderRoutes = () =>
    routes.map(route => <Route key={route} {...route} exact />);

  render() {
    return (
      <Router>
        <Switch>{this.renderRoutes()}</Switch>
      </Router>
    );
  }
}

Answer 1

Generally solved the issue. You should have added publicPath: "/" to the output.

Answer 2

https://webpack.js.org/configuration/dev-server/#d...
Add to config

devServer: {
    historyApiFallback: true
  }