除特快路线外，均出现404错误

Question

我实现了 React 和 Express 项目来进行简单的部署测试。 但是，只有快速路由（“/”）有响应，其他路由会出现 404 错误。

反应主页.tsx

export default function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState<Movie[] | null>(null);
  useEffect(() => {
    getMovies();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getMovies = async () => {
    const response: GetMoviesResponse = await axios.get(
      'https://flyio-server3001.fly.dev'
    );
    setMovies(response.data.movies);
    setLoading(false);
  };

  return (
    <div>
      <h1>안녕하세요~ 최근 영화를 소개합니다!</h1>
      <h5>이미지를 클릭 시 영화 상세 정보를 확인할 수 있습니다.</h5>
      <MovieList>
        {loading && <li>영화 리스트 로딩 중...</li>}
        {movies &&
          movies.map((movie) => (
            <li key={movie.id}>
              <Link
                to={
                  process.env.NODE_ENV === 'development'
                    ? `/movies/${movie.id}`
                    : process.env.PUBLIC_URL + `/movies/${movie.id}`
                }
                state={{ movie }}
              >
                <img src={movie.medium_cover_image} alt={movie.title} />
              </Link>
              <Title>{movie.title}</Title>
            </li>
          ))}
      </MovieList>
    </div>
  );
}

反应详细信息.tsx

export default function Detail() {
  const [loading, setLoading] = useState(true);
  const [movie, setMovie] = useState<Movie | null>(null);
  const { state } = useLocation();

  useEffect(() => {
    const movie: Movie = state.movie;
    setMovie(movie);
    setLoading(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const hello = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const response = await axios.get('https://flyio-server3001.fly.dev/hello');
    console.log(response);
  };

  return (
    <div>
      <Link
        to={
          process.env.NODE_ENV === 'development'
            ? `/`
            : process.env.PUBLIC_URL + `/`
        }
      >{`<= 홈으로`}</Link>
      <button onClick={hello}>메시지 받기</button>
      {loading && <div>영화 상세 정보 로딩 중.....</div>}
      {movie && (
        <div>
          <img src={movie.medium_cover_image} alt={movie.title} />
          <h1>{movie.title}</h1>
          <h5>{movie.year}년 개봉</h5>
          <h5>상영 시간 : {movie.runtime}분</h5>
          <h5>줄거리 : </h5>
          <p>{movie.summary}</p>
        </div>
      )}
    </div>
  );
}

Node.js app.ts

import express from 'express';
import fetch from 'node-fetch';
import cors from 'cors';

const app = express();
const PORT = process.env.PORT || 3001;

app.use(cors());
app.use('/', require('./index'));

app.listen(PORT, () => `✅ ${PORT} port server connected success`);

Node.js 索引.ts

import express from 'express';

const indexRouter = express.Router();

indexRouter.get('/', async (req, res) => {
  const response = await (
    await fetch('https://yts.mx/api/v2/list_movies.json')
  ).json();
  return res.status(304).json({ movies: response.data.movies });
});

indexRouter.get('/hello', (req, res) => {
  return res.json({ message: 'Hello Fly.io Server !!!' });
});

module.exports = indexRouter;

其中，当你在React的Detail页面点击向/hello root发送请求的按钮时，会返回404错误。

Answer 1

现在，请忽略代码库的 React 部分。只需专注于让 ExpressJS API 正常工作即可。您最好使用 Postman 或 Insomnia 等工具来测试 Express API。

当您有“大量代码”并且“事情无法正常工作”时，最好的策略可能是在调查导致问题的代码时找到可以忽略/消除的代码。

来自 Express 的“404”。因此，在 Express 能够正常运行之前，请远离 React 代码。