Почему React Router не меняет представления об изменении URL?

Question

Я следовал этому руководству для создания реактивного проекта.Учебное пособие привело к созданию нескольких реагирующих компонентов, содержащих простой пример текста.Это позволило бы протестировать пример простого компонентаact-router-dom.

, все остальные компоненты аналогичны.

import React, { Component } from 'react'

export default class Cart extends Component {
  render() {
    return (
      <div>
        <h3>Hello From Cart</h3>
      </div>
    )
  }
}

Компоненты отображаются с использованием реагирующего маршрутизатора, которыйпереключает отображаемый компонент в зависимости от URL

class App extends React.Component {
  render() { 
    return (  
      <React.Fragment>
        <NavBar/>
        <Switch>
          <Route path="/details" Component={Details} />
          <Route path="/cart" Component={Cart} />
          <Route path="/" Component={ProductList} />
          <Route Component={Default} />
        </Switch>
      </React.Fragment>
    );
  }
}

Кроме того, во избежание путаницы мой маршрутизатор браузера инкапсулирует компонент моего приложения из index.js

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

Когда я перехожу к /URL-адрес корзины на моем локальном хосте - это мои результаты.

Что должно отображаться:

https://imgur.com/fZw5QnP.png

Однако отображается:

https://i.imgur.com/F1O07Y8.png

Пожалуйста, помогите мне решить эту проблему, спасибо.

Answer 1

Я осознал свою ошибку, у меня был «Component = {}» в маршруте, когда он должен был быть «component = {}» (строчная буква «c»).Я публикую это для всех тех, у кого такая же проблема.