Невозможно передать реквизиты компоненту через реагирующий маршрутизатор

Question

Я не могу передать реквизит, используя реагирующий маршрутизатор.Мой код до сих пор:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

const EditExpensePage = props => {
  console.log(props);

  return <div>Editing the expense with id of </div>;
};

const AppRouter = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/edit/:id" component={EditExpensePage} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

ReactDOM.render(<AppRouter />, document.getElementById('appDiv'));

Скриншот ошибки

Я пытаюсьпросто откройте id в консоли.

Ошибка отображается только при попытке передать реквизиты

path="/edit/:id"

Ссылка на источник: https://reacttraining.com/react-router/web/api/Route/route-props

Answer 1

Это может быть проблема с вашей локальной средой, я не вижу никаких проблем с вашим кодом.Я попробовал в https://codesandbox.io/s/ox773ywmn9, и нет проблемы

Answer 2

Это та же проблема, что и в этот вопрос .Проблема специфична для настройки.Как показано в сообщении об ошибке, bundle.js загружается из текущего пути, /edit/bundle.js, в то время как его следует загружать из /bundle.js.

Сценарии должны иметь абсолютные пути:

<script type="text/javascript" src="/bundle.js"></script>

Или необходимо указать базовый URL:

<base href="/">

Answer 3

Я могу получить доступ к подпоркам в дочерних компонентах, используя это:

this.props.match.params.id