React application router

Question

import React, { Component } from 'react';
import './App.css';
import {Switch,Route} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './componants/Navbar';
import ProductList from './componants/ProductList';
import Details from './componants/Details';
import Default from './componants/Default';
import Cart from './componants/Cart';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Navbar />
       <Switch>
         <Route exact path={'/'} Component={ProductList} />
         <Route path={'/Details'} Component={Details} />
         <Route path={'/Cart'} Component={Cart} />
         <Route Component={Default} />
        </Switch>
      </React.Fragment>
    );
  }
}

export default App;

Why <switch></switch> not working while I reach any page of my application?

Answer 1

you need to specify like this

<Route exact path="/" component={PlaceOrder} />
<Route path="/updatepredicted" component={UpdatePredicted} />
<Route path="/kitchen" component={Kitchen} />

looks at the path