CODEWITHSUNDEEP
javascriptreactjsreact-router
FailedUnitTest
FailedUnitTest

Reputation: 1800

react router Cannot GET

my first attempt at setting up routing for react. Something is not adding up though.

I get the message: Cannot GET /monitors when I type in "http://localhost:8080/monitors"

App.js

import React from 'react';
import ReactDom from 'react-dom';
import Sidebar from './components/Sidebar'
import Main from './components/Main'

const App = () => {
      return (
        <div className="container">
            <Sidebar/>
            <Main/>
        </div>
      );
   }
export default App;

Main.js

import {Switch, Route} from 'react-router-dom'
import ProductsDisplay from './ProductsDisplay'
import Home from './Home'
import Contact from './Contact'

const Main = () => {
    <main>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/monitors" component={ProductsDisplay} category="monitors"/>
            <Route path="/machines" component={ProductsDisplay} category="machines"/>
        </Switch>
    </main>
}

ProductsDisplay.js

import React from 'react';
import ReactDom from 'react-dom';
import Product from './Product';

class ProductsDisplay extends React.Component {
    state = {
        productList: [],
        productCategory:''
    };

    constructor(props){
        super();
        productCategory = props.category;
    }

    componentDidMount() {
        this.setState(prevState => ({
            productList: [
                {productName: "ASUS 4K, 144Hz Monitor", productDescription: "Blah Blah Blah, cool stuff", productAvailability: true, productRating: 4.4},
                {productName: "Samsung 4K, 75Hz Monitor", productDescription: "Samsung cool stuff!", productAvailability: false, productRating: 4.0},
                {productName: "LG 2560x1080 Monitor, 60Hz Monitor", productDescription: "LG cool features!", productAvailability: false, productRating: 5.0},
            ]
        }));
    }

    render() {
        return (
            <div className="product-display">
            {this.state.productList.map((product, i) => 
                <Product productName={product.productName} 
                    productDescription={product.productDescription} 
                    productAvailability={product.productAvailability} 
                    productRating={product.productRating} key={i}/>
            )}
            </div>
        );
    }
}
export default ProductsDisplay;

When I render <App/> I surround it with <BrowserRouter> I tried removing these tags but it has no effect.

Upvotes: 0

Views: 91

Answers (1)

Abundance Oshianor
Abundance Oshianor

Reputation: 184

You need to wrap your route with BrowserRouter

import { BrowserRouter, Switch, Route } from 'react-router-dom';
<BrowserRouter>
      <Switch>
        <Route exact path="/" component={Fakebook}/>
        <Route exact path="/Home" component={Home}/>
        <Route component={NotFound}/>
      </Switch>
  </BrowserRouter>

Upvotes: 1

Related Questions