react JSアプリケーションでのページの切り替え方法

まず、Reactの利点を利用して、既存のコードをきれいにしましょう.
componentを使え!

まずはムービーjsというコンポーネントを作成します.

アプリもありますjsは以下のように修正します.

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
  return null;
}

export default App;

ルータを使用してページを切り替え

インストールしておきます!!

ルーターで区切る.
例えば、1つのルータは、家庭、ホームページ、ホームページなどであってもよい.
... routesフォルダを作成!

App.jsはrounderのレンダリングにのみ使用されます.

ルーティングフォルダにはいくつかのページが含まれています.
routerはURLを表示するコンポーネントです.
URLによって異なるコンポーネントが表示されます.HomeまたはDetailを