Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Except for the express route, a 404 error occurs

I implemented react and express projects for simple deployment testing.
However, a response comes only from the express route ("/"), and a 404 error occurs from the other routes.

React Home.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>
  );
}

React Detail.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 index.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;

Among these, when you click the button that sends a request to the /hello root on React’s Detail page, a 404 error is returned.

Tags:

2

Answers


  1. 0

    For now, ignore the React part of your codebase. Just focus on getting the ExpressJS APIs working. You are likely best to test the Express APIs using a tool such as Postman or Insomnia.

    When you have "a lot of code" and "things aren’t working", likely the best strategy is to find the code you can ignore/eliminate while investigating the code that is causing issues.

    A "404" is coming from Express. So stay away from the React code until you can get Express running properly.

    Login or Signup to reply.
  2. 0

    You seem to be mixing CommonJS module syntax require() and ES Module syntax import to import your modules. I presume you have "type": "module" in your package.json so you can try changing:

    app.ts

    import express from 'express';
import fetch from 'node-fetch';
import cors from 'cors';
import indexRouter from './index'; //, use import

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

app.use(cors());
app.use('/', indexRouter); //< use the imported router

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

    index.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 !!!' });
});
export default indexRouter //< use this
//module.exports = indexRouter; //< delete this

    Edit: I just noticed you are using TypeScript so the syntax will be different. I have updated the code examples above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search