Почему не матчится nested route?

Question

[GaserV]

Такая проблема. Есть два роута например: "/movies" & "/movies/:id". Если переходить ко второму роуту с первого(с помощью Link) то все работает норм. Но если вбить УРЛ напрямую, например /movies/1 - то у меня в консоли ошибка что not found. Также касается если роут например "/movies/search" то /movies открывается а /movies/search нет. Из-за чего так получается?

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
  }
];

Рендер роутов:

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

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

Comments

[Mikhail Osher]

Демку на codesandbox/github хоть предоставьте

[GaserV]

Mikhail Osher, updated

[Mikhail Osher]

GaserV, переход руками в url? dev/prod окружение? cra? ошибка js или веб-сервера?

[GaserV]

Mikhail Osher, Да, если руками вбить урл. В консоли браузера ошибка "Failed to load resource: the server responded with a status of 404 (Not Found)" и ничего не рендерится в браузере.

[Mikhail Osher]

GaserV, веб-сервер какой? nginx?

[GaserV]

Mikhail Osher, webpack-dev-server

Answer 1

[GaserV]

Вообщем решил вопрос. В output нужно было добавить publicPath: "/".

Answer 2

[Mikhail Osher]

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

Добавьте в конфиг

devServer: {
    historyApiFallback: true
  }

Comments

[GaserV]

Имеется.

devServer: {
    contentBase: "./dist",
    hot: true,
    historyApiFallback: true
  },

[Mikhail Osher]

GaserV, а скриншоты вкладок console и network в Devtools может есть? (мол на ошибку посмотреть)

[GaserV]

Так я ведь написал выше в комментарий. Там 404 ошибка