Nothing is Displaying on my browser after running npm start in react app

Question

after installing react-router-dom version 6 I tried to run npm start but I get a blank page with no error in my console. Below the first code is the code for the screen I want to display. Please can someone help me and show me what I am not doing correctly here.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import reportWebVitals from './reportWebVitals';
import MovieList from './component/movieList';

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


ReactDOM.render(
  <React.StrictMode>
    <Router>
    <Routes>
      <Route exact path = "/welcome" element = {MovieList}/>
    </Routes>
    </Router>
    
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

import { useState } from "react";

function MovieList() {
  const [searchTerm, setSearchTerm] = useState("")
  const [movies, setMovie] = useState([])
  const handleMovieSearchChange = (e) => {
    setSearchTerm(e.target.value);
  };

  const fetchMovie = (movieName) => {
    const searchUrl = `https://www.omdbapi.com/?s=${movieName}&page=2&apikey=2c2c85ae`;

    fetch(searchUrl)
      .then((response) => response.json())
      .then((result) => {
        setMovie(result.Search);
      });
  };

  const movieItems = movies.map((movie, index) => {
    return (
      <div key={index}>
       <img src={movie.Poster} alt="" />
        <h3>{movie.Title}</h3>
      </div>
    )
  })

  return (
    <div>
      <h1>Movie List Page</h1>Search
      <input type={"text"} onChange={handleMovieSearchChange} />
      <button onClick={() => fetchMovie(searchTerm)}>Search</button>
      {movieItems}
    </div>
  );
}

export default MovieList;

Answer 1

You are getting a blank white screen because you are not rendering any component/page for the home route / . When the react application render initially renders the page which has path="/" . there are two ways to fix it you can either render your welcome page at path / or you can redirect the user to the welcome screen if the user hits the home or / path.

First Method

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import MovieList from './component/movieList'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <Router> <Routes> <Route exact path = "/" element = {MovieList}/> </Routes> </Router> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

Second Method

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import MovieList from './component/movieList'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; ReactDOM.render( <React.StrictMode> <Router> <Routes> <Route exact path = "/welcome" element = {MovieList}/> <Route path="/" element={<Navigate replace to="/welcome" />} /> </Routes> </Router> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

Answer 2

I guess it is a componet: <Route exact path = "/welcome" element = {MovieList}/>

instead <Route exact path = "/welcome" element = {<MovieList/>}/>