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 (
      <div>
        <h3>Hello From Cart</h3>
      </div>
    )
  }
}

The components are displayed using a react router which switches the displayed component depending on the 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>
    );
  }
}

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

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

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

What should be displayed:

https://imgur.com/fZw5QnP.png

However, what is displayed is:

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

Please help me fix this issue, thank you.

1 Answers

2
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.