Why my Link returns not found in this React project?

1

here is my code:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class MovieCard extends Component {
    render() { 
        const { title, movieImg, genre, id } = this.props.movie;

        if(movieImg) {
            return ( 
                <article>
                    <div className="card my-4">
                        <img src = {movieImg} 
                        width = "920" height = "524" alt = "" className = "img-fluid card-img-top" />
                        <div className="card-body text-center">
                            <h5>{title}</h5>
                            <p>{genre.name}</p>
                        </div>
                        <Link to = {`/movies/${id}`} className="btn btn-primary mb-3 width">
                            Change Image
                        </Link>
                    </div>
                </article>
             );
        } else if (movieImg === "") {
            return ( 
                <article>
                    <div className="card my-4">
                        <img src = "https://github.com/Ceci007/images/blob/master/img-vidly/image-default.jpg?raw=true"
                        width = "920" height = "524" alt = "" className = "img-fluid card-img-top" />
                        <div className="card-body text-center">
                            <h5>{title}</h5>
                            <p>{genre.name}</p>
                        </div>
                        <Link to = {`/movies/${id}`} className="btn btn-primary mb-3 width">
                            Change Image
                        </Link>
                    </div>
                </article>
             );
        }
    }
}
  
export default MovieCard;
2

We would need to know more about the app than this, because we can’t see how the router has been set up – it could be to do with that. Or it could be where you’re trying to run it can’t currently deal with client-side routing and you need to do something to fix that…we need more context

3

this are my routes, I also have a Node backend I should check out that too?

> import React from 'react';
> import  { Route, Redirect, Switch } from 'react-router-dom';
> import { ToastContainer } from 'react-toastify';
> import Movies from './components/movies';
> import MovieForm from './components/movieForm';
> import Customers from './components/customers';
> import Posters from './components/posters';
> import NotFound from './components/notFound';
> import NavBar from './components/navBar';
> import Footer from './components/footer';
> import LoginForm from './components/loginForm';
> import RegisterForm from './components/registerForm';
> import './App.css';
> import './assets/css/template.css';
> import 'react-toastify/dist/ReactToastify.css';
> 
> 
> function App() {
>   return (
>     <React.Fragment>
>       <ToastContainer />
>       <NavBar />
>       <main className = "container">
>           <Switch>
>           <Route path = "/register" component = {RegisterForm} />
>           <Route path = "/login" component = {LoginForm} />
>           <Route path = "/movies/:id" component = {MovieForm} />
>           <Route path = "/movies" component = {Movies} />
>           <Route path = "/customers" component = {Customers} />
>           <Route path = "/images" component = {Posters} />
>           <Route path = "/not-found" component = {NotFound} />
>           <Redirect from = "/" exact to = "/movies" />
>           <Redirect to = "not-found" />
>           </Switch>
>       </main>
>       <Footer />
>    </React.Fragment>
>   );
> }
> 
> export default App;
4

@DanCouper if I share my backend and frontend in GitHub would you help me? please I have two mayor issues this one about the routes and the second one is that currently I’m not able to upload images, can you please check out my repos? https://github.com/Ceci007/vidly-backend and https://github.com/Ceci007/vidly-frontend if you could help me fix this 2 issues I’ll write your name like one of the autors of this project, please help me I want to add this to my portfolio and thanks beforehand.

5

DanCouper is already working on helping you, and will probably keep asking you questions to help you work through your problems. This forum is an amazing educational resource because rather than just fixing your code for you (which we don’t do) people will talk through the problem with you in an attempt to help you arrive at a solution you can implement yourself.

6

thanks @ArielLeslie if he can tell me where the problem is comming from I’ll be very thankfull, I don’t even know if is from React or Node, I don’t have a clue.

7

What is the error? If it’s from React the screen will just show one or more red error messages.

8

I guess is from Node then becouse in React I have no errors. I have a question if I want to go from /rentals to /movies/:id in rentals router which one is the proper get method?, I think my get request might be missing in rentals router.

9

I asked in Stackoverflow and they told me the problem should be in React becouse Link has a “to” method that has nothing to do with the backend it just sends you to that route but I think the problem is that I have a redirect to 404 not found and this is becouse React is having problems finding the movie id. @DanCouper becouse if I remove the redirect to page not found it sends me to the movieForm but the problem is the movieForm is empty and it shoul have the data of the movie with the current id.

10

I fixed this error in the object destructuring should be _id instead of just id @DanCouper :smiley: that’s one issue solved now I have to figure out the thing about the file uploading.

11

I’m having a Cannot GET / error in localhost:3900 @DanCouper and It this started to happen since I added multer and the image upload functionality here is my router.
can you tell what is wrong?

const { Movie, validate } = require("../models/movie");
const { Genre } = require("../models/genre");
const auth = require("../middleware/auth");
const admin = require("../middleware/admin");
const validateObjectId = require("../middleware/validateObjectId");
const moment = require("moment");
const mongoose = require("mongoose");
const multer = require ("multer");
const express = require("express");
const router = express.Router();

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'public/img/');
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const fileFilter = (req, file, cb) => {
  if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(null, false);
  }
}

const upload = multer({ 
    storage: storage, 
    limits: { fileSize: 1024*1024*5 },
    fileFilter: fileFilter 
});

router.get("/", async (req, res) => {
  const movies = await Movie.find()
    .select("-__v")
    .sort("name");
  res.send(movies);
});

router.post("/", upload.single('movieImg'), [auth], async (req, res) => {
  const { error } = validate(req.body);
  if (error) return res.status(400).send(error.details[0].message);

  const genre = await Genre.findById(req.body.genreId);
  if (!genre) return res.status(400).send("Invalid genre.");

  const movie = new Movie({
    title: req.body.title,
    genre: {
      _id: genre._id,
      name: genre.name
    },
    numberInStock: req.body.numberInStock,
    dailyRentalRate: req.body.dailyRentalRate,
    movieImg: req.file.path,
    publishDate: moment().toJSON()
  });
  await movie.save();

  res.send(movie);
});

router.put("/:id", upload.single('movieImg'), [auth], async (req, res) => {
  const { error } = validate(req.body);
  if (error) return res.status(400).send(error.details[0].message);

  const genre = await Genre.findById(req.body.genreId);
  if (!genre) return res.status(400).send("Invalid genre.");

  const movie = await Movie.findByIdAndUpdate(
    req.params.id,
    {
      title: req.body.title,
      genre: {
        _id: genre._id,
        name: genre.name
      },
      numberInStock: req.body.numberInStock,
      dailyRentalRate: req.body.dailyRentalRate,
      movieImg: req.file.path
    },
    { new: true }
  );

  if (!movie)
    return res.status(404).send("The movie with the given ID was not found.");

  res.send(movie);
});

router.delete("/:id", [auth, admin], async (req, res) => {
  const movie = await Movie.findByIdAndRemove(req.params.id);

  if (!movie)
    return res.status(404).send("The movie with the given ID was not found.");

  res.send(movie);
});

router.get("/:id", validateObjectId, async (req, res) => {
  const movie = await Movie.findById(req.params.id).select("-__v");

  if (!movie)
    return res.status(404).send("The movie with the given ID was not found.");

  res.send(movie);
});

module.exports = router;