I've been following this tutorial for creating a react project. The tutorial led to creating multiple react components that have a simple sample text within them. This would allow for the testing of the react-router-dom.

example of the simple component, all other components are similar.

import React, { Component } from 'react'

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

The components are displayed using a react router which switches the displayed component depending on the url

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

Furthermore to avoid confusion, my browser router is encapulating my App component from the index.js

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

When I navigate to the /cart url on my local host these are my results.

What should be displayed:


However, what is displayed is:


Please help me fix this issue, thank you.

1 Answers

Joe On

I realized my error, I had "Component={}" within the Route, when it was supposed to be "component={}" (lowercase "c"). I'm posting this for all those, who have the same issue.