React Router Nested Routes пытается вернуть источник файла вместо компонента

Question

Я следую учебному пособию по стеку без серверов. Я создаю /notes/new путь для рендеринга компонента NewNotes, однако вместо рендеринга моего компонента кажется, что он пытается найти путь к файлу?

ошибка:

GET http://localhost:8080/notes/main.js net::ERR_ABORTED 404 (Not Found)

Маршруты. js:

import React from 'react'
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
import Login from "./containers/Login";
import NotFound from "./containers/NotFound";
import Signup from "./containers/Signup";
import NewNote from "./containers/NewNote";
export default function Routes( props ) {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/login" exact component={Login}  />
      <Route exact path="/signup" component={Signup}/>
      <Route exact path="/notes/new" component={NewNote} />
      { /* Finally, catch all unmatched routes */ }
      <Route component={NotFound} />
    </Switch>
  );
}

Когда я проверяю ошибку 404, кажется, что /notes/new - это расположение файла а не компонент.

Мой компонент приложения:

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'
import { Nav, Navbar, NavItem } from "react-bootstrap"
import { LinkContainer } from "react-router-bootstrap"
import { onError } from "./libs/errorLib";
import Amplify from 'aws-amplify'
import { Auth } from 'aws-amplify'
import { AppContext } from "./libs/contextLib";



import Routes from "./Routes"
import './css/index.css'

const App = (props) => {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect( ()=> {
    console.log(`isAuthenticated:${ isAuthenticated }`)
  }, [isAuthenticated])

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        onError(e);
      }
    }

    setIsAuthenticating(false);
  }

  async function handleLogout() {
    await Auth.signOut();
    userHasAuthenticated(false);
  }

  useEffect( ()=>{
    console.log(`
      COGNITO_AWS_REGION:${process.env.COGNITO_AWS_REGION}
      COGNITO_USER_POOL_ID:${process.env.COGNITO_USER_POOL_ID}
      COGNITO_IDENTITY_POOL_ID:${process.env.COGNITO_IDENTITY_POOL_ID}
      COGNITO_APP_CLIENT_ID:${process.env.COGNITO_APP_CLIENT_ID}
      `)
  }, [])

    return (
      !isAuthenticating &&
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {isAuthenticated
                ? <NavItem onClick={handleLogout}>Logout</NavItem>
                : <>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}>
          <Routes />
        </AppContext.Provider>
      </div>
    );
}

var root = document.getElementById('root');
ReactDOM.render(
  <Router>
    <App />
  </Router>, root)