Untitled

error-The NotesList is not coming
:3000/api/Notes:1 

Failed to load resource: the server responded with a status of 404 (Not Found)

App.js

import './App.css';
import React from 'react'

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

//import { NotesList, NotesInsert, NotesUpdate } from './pages'
import { NotesList } from './pages'


function App() {
  return (
    <div>
     <h1>Note-making</h1>
     <Router>
         
            <Switch>
                <Route path="/Note/list" exact component={NotesList} />
            </Switch>
        </Router>
    </div>
  );
}

export default App;





NotesList.js

import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../api'

import styled from 'styled-components'
import 'react-table/react-table.css'

class NotesList extends Component {
    constructor(props) {
        super(props)
        //isLoading - boolean value indicating if component is currently loading data
        this.state = {
            notes: [],
            columns: [],
            isLoading: false,
        }
    }
    
    //see above for explanation
    componentDidMount = async () => {
        //isLoading - boolean value indicating if component is currently loading data
        this.setState({ isLoading: true })

        await api.getAllNotes().then(notes => 
            {
            this.setState({
                notes: notes.data.data,
                isLoading: false,
            })
        })
    }



    render() {
        const { notes, isLoading } = this.state

        const columns = [
            {
                Header: 'ID',
                accessor: '_id',
                filterable: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
                filterable: true,
            },
            {
                Header: 'Topic',
                accessor: 'topic',
               // Cell: props => <span>{props.value.join(' / ')}</span>,
            },
        ]
    //  This code is checking if the notes array is empty and if it is, it sets 
    //   the showTable variable  to false.If showTable is true, it renders 
     //   the <ReactTable> component, otherwise it does not.
        
        let showTable = true
        if (!notes.length) {
            showTable = false
        }

        return (
            <div>
                <h1>abcd</h1>
                {showTable && (
                    <ReactTable
                        data={notes}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
                )}
        </div>
        )
    }
}

export default NotesList