在反应应用程序中运行 npm start 后，我​​的浏览器上没有显示任何内容

Question

安装 react-router-dom 版本 6 后，我尝试运行 npm start，但我在控制台中得到一个没有错误的空白页面。第一个代码下面是我要显示的屏幕的代码。请有人帮助我，告诉我我在这里做错了什么。

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

我猜它是一个组件： <Route exact path = "/welcome" element = {MovieList}/>

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

Answer 2

您得到一个空白屏幕，因为您没有为主路由 / 渲染任何组件/页面。当 react 应用程序渲染最初渲染具有path="/" 的页面时。有两种方法可以修复它，您可以在路径 / 处呈现欢迎页面，或者如果用户点击主页或 / 路径，您可以将用户重定向到欢迎屏幕。

第一种方法

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();

第二种方法

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();