-4

Vite server was working fine in my development environment until I turned it off in terminal with Ctrl+C and added react-router-dom to my project. Upon restarting the dev server using vite dev, I am now getting a 404 error at "http://localhost:5173/".

This is what my index.html looks like:

<!doctype html>
<html lang="en"> 
    <head>    
       <meta charset="UTF-8" />    
       <link rel="icon" type="image/svg+xml" href="/vite.svg" />    
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />        
       <title>Movies App</title>    
       <base href="/" />  
    </head>  
    <body>    
       <div id="root"></div>    
       <script type="module" src="./src/main.tsx"></script>  
    </body>
</html>

And this is my vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler']],
      },
    }),
  ],
})

main.tsx

import { createRoot } from 'react-dom/client'
import (BrowserRouter) from "react-router-dom"
import './index.css'
import App from './App.tsx'
import {BrowserRouter} from "react-router-dom";

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <BrowserRouter>
          <App />
      </BrowserRouter>

  </StrictMode>,
)

App.tsx

import './App.css'
import Home from "./pages/Home"
import {Routes, Route} from "react-router-dom";
import Favorites from "./pages/Favorites.tsx";
import NavBar from "./components/NavBar";

function App() {


  return (
    <>
        <div>
            <NavBar />
            <main className="main-content">
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/favorites" element={<Favorites />} />
                </Routes>
            </main>
        </div>
       </>
  )
}


export default App

NavBar.tsx

import {Link} from 'react-router';


function NavBar(){
    return(
        <nav className="navbar">
            <div className="navbar-brand">
                <Link to="/">Movie App</Link>
            </div>
            <div className="navbar-links">
                <Link to="/" className="nav-link">Home</Link>
                <Link to="/favorites" className="nav-link">Favorites</Link>
            </div>
        </nav>
    )
}
export default NavBar;

Home.tsx

import MovieCard from "../components/MovieCard";
import {useState} from "react";

function Home() {
    const [searchQuery, setSearchQuery] = useState("");

    const movies = [
        {id:1, title:"John Wick", release_date: "2020"},
        {id:2, title:"Terminator", release_date: "1984"},
        {id:3, title:"The Matrix", release_date: "2000"},
    ]

    // @ts-ignore
    const handleSearch = (e) =>{
        e.preventDefault()
        alert("Search Result: " + searchQuery);
        setSearchQuery("");
    };

    return (
        <div className="home">
            <form onSubmit={handleSearch} className="search-form">
                <input type="text" placeholder="Search for movies..."
                       className="search-input"
                       value={searchQuery}
                       onChange={(e) =>  setSearchQuery(e.target.value)}
                />
                <button type="submit" className="search-button" >Search</button>

            </form>

            <div className="movies-grid">
                {movies.map(
                    (movie) =>

                        (
                               <MovieCard movie={movie} key={movie.id}/>
                        )
                )}
            </div>
        </div>
    )
}

export default Home;

I am trying to get my project running on localhost again.

Improve this question
18
  • Can you try commenting out the <base href="/" />? Commented Nov 21 at 19:22
  • Commented out. Still getting the 404. I also had tried placing the index.html in /public and in /src. both of those did not work, and I have index.html back in the root. Commented Nov 21 at 19:45
  • Can you add your main.tsx? Commented Nov 21 at 19:47
  • And have you tried clearing your Vite cache (just in case), before restarting? Commented Nov 21 at 19:48
  • Please edit your question to specifically and clearly define the problem that you are trying to solve. Additional details — including all relevant code (see minimal reproducible example for details), complete error messages and stacktraces, and debugging logs and details from any investigation — will help readers to better understand your problem and what you are asking. Commented Nov 21 at 19:48
Related questions
5
React (vite) hmr is breaking the app, the page goes blank
2
I have this error: " xport 'Switch' (imported as 'Switch') was not found in 'react-router-dom' "
774
Attempted import error: 'Switch' is not exported from 'react-router-dom'
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.