CODEWITHSUNDEEP
reactjsreact-router-dom
Joe
Joe

Reputation: 29

Why is React Router not changing views on URL change?

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://i.sstatic.net/pxvLK.png

However, what is displayed is:

https://i.sstatic.net/LeX7c.png

Please help me fix this issue, thank you.

Upvotes: 0

Views: 37

Answers (1)

Joe
Joe

Reputation: 29

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.

Upvotes: 2

Related Questions