React TypeError: местоположение не определено

ОБНОВЛЕНИЕ: Привет, ребята. Я идиот. Компонент использует атрибут to, в отличие от href тега. Это была моя проблема. Действительно. Что ж, уходит 3 дня насмарку и все ваше время. В любом случае спасибо за вашу помощь, я ценю все, что вы сделали.

РЕДАКТИРОВАТЬ - Объяснение решения (как описано в ответе @Vishah)

Я добавляю здесь правку в надежде помочь всем, кто сталкивается с этим.

Источником проблемы было то, что компоненты Links включали атрибуты «href» вместо атрибутов «to».

-        <Link href='/'>Home</Link>
+        <Link to='/'>Home</Link>

Кроме того, стоит отметить, что «href» не выдает ошибку атрибута, потому что атрибуты в нижнем регистре все еще действительны dom в React ^ 16.2.

Вот фиксация его репо: https://github.com/vishalmshah/MERNStackBoilerplate/commit/73fb3fe2e39ffa870fb91bd8b3592887886e3dbb

Не в этом проблема

Думаю, я вижу проблему. BrowserRouter использует объект местоположения, чтобы отслеживать, где вы находитесь, вашу историю и, возможно, другие местоположения, к которым приложение будет перемещаться.

Маршрутам BrowserRouter требуется предоставить объект местоположения, который они могут использовать для сравнения своего значения пути.

Ваш маршрут обернут объектом вашего приложения без передачи объекта местоположения.

Попробуйте передать местоположение через свое приложение:

const App = ({ location }) => (

Впоследствии вам, возможно, придется получить доступ к местоположению в Маршрутах:

<Route location={location} ...

В этом примере я получил информацию от: https://github.com/Remchi/bookworm-react/blob/master/src/App.js

Я сразу же замечаю, как вы импортируете компоненты ...

import { HomePage, LoginPage } from "./components/pages";

Вы не можете этого сделать ... Вместо этого:

import HomePage from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';

Кроме того, вы не должны устанавливать response-router, а просто response-router-dom ...

Вот App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import LoginPage from './LoginPage';

const App = () => (
  <Switch>
    <Route path="/" component={HomePage} exact={true} />
    <Route path="/login" component={LoginPage} exact={true} />
  </Switch>
);

export default App;

А вот и Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

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

Примечание: я не создавал каталог страниц, а также использую Switch ... (документы: https://reacttraining.com/react-router/web/api/Switch)