CODEWITHSUNDEEP
reactjsreact-router
UnskilledCoder
UnskilledCoder

Reputation: 312

Route is getting passed but component is not getting rendered

My question is about the first route which is this line:

<Route path="/products/:id" Component={ProductDetails} />

Which is part of this:

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="content">
          <Switch>
            <Route path="/products/:id" Component={ProductDetails} />
            <Route
              path="/products"
              render={(props) => <Products sortBy="newest" {...props} />}
            />
            <Route path="/posts/:year/:month" component={Posts} />
            <Route path="/admin" component={Dashboard} />
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </div>
    );
  }
}

Notice the URL is correct and even the props looks correct too but nowhere I see the ProductDetails component being rendered. What happened to it? Where did it go?

See here is the props of that ProductDetails page: enter image description here

and ProductDetails its self for now is just a simple HelloWorld page anyway and no console error either.

import React, { Component } from "react";

class ProductDetails extends Component {
  handleSave = () => {
    // Navigate to /products
  };

  render() {
    return (
      <div>
        <h1>Product Details - </h1>
        <button onClick={this.handleSave}>Save</button>
      </div>
    );
  }
}

export default ProductDetails;

Upvotes: 0

Views: 23

Answers (1)

Arun Kumar Mohan
Arun Kumar Mohan

Reputation: 11915

You're passing the component to Route via the Component prop but it should be component.

<Route path="/products/:id" component={ProductDetails} />

Upvotes: 1

Related Questions