1

En esta imagen pueden ver que quiero hacer click en el Link change image y que me mande a la ruta /images/new, al hacer click a ese boton la ruta cambia pero la vista no, es decir no me aparece el formulario para subir la imagen, por eso asumo que algo falla en express en images.js aquí una muestra de la imagen:

introducir la descripción de la imagen aquí

Estoy usando axios para hacer los llamados a get, post, put etc... pero el problema es que la vista no carga cuando cambio la ruta.

const { Image, validate } = require("../models/image");
const auth = require("../middleware/auth");
const admin = require("../middleware/admin");
const validateObjectId = require("../middleware/validateObjectId");
const moment = require("moment");
const mongoose = require("mongoose");
const express = require("express");
const router = express.Router();
const multer = require('multer');

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

const upload = multer({ storage: storage }).array('image');

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

  const image = new Image({
    image: req.body.image,
    publishDate: moment().toJSON()
  });
  
  upload(req, res, (err) => {
   
      if (err instanceof multer.MulterError) {
          return res.status(500).json(err)
        // A Multer error occurred when uploading.
      } else if (err) {
          return res.status(500).json(err)
        // An unknown error occurred when uploading.
      } 
      
      return res.status(200).send(req.image)
      // Everything went fine.
    });

    await image.save();

    res.send(image);
});

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

  const image = await Image.findByIdAndUpdate(
    req.params.id,
    {
      image: req.body.image
    },
    { new: true }
  );

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

  res.send(image);
});

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

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

  res.send(image);
});

module.exports = router;

Lo que quiero lograr es que cuando haga click en el boton lila "change image" la vista del formulario para cargar la imagen aparesca, la tengo como componente se llama UploadImage y esta en mis rutas.

Aqui esta el archivo de rutas:

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 UploadImages from './components/uploadImages';
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 = "/images/:id" component = {UploadImages} />
          <Route path = "/not-found" component = {NotFound} />
          <Redirect from = "/" exact to = "/movies" />
          <Redirect to = "not-found" />
          </Switch>
      </main>
      <Footer />
   </React.Fragment>
  );
}

export default App;

5
  • Y el archivo de rutas?
    – gbianchi
    Commented el 13 ago. 2019 a las 20:19
  • @gbianchi ya agregue el archivo de rutas, al hacer click al boton la ruta si cambia pero la vista no. Commented el 13 ago. 2019 a las 20:49
  • 2
    Inverti el orden de las rutas. Pone primero images/:id... si funciona como pienso el problema esta ahi
    – gbianchi
    Commented el 13 ago. 2019 a las 21:30
  • si @gbianchi gracias era eso, ahora voy a trabajar en el backend, muchas gracias!! un abrazo :D Commented el 13 ago. 2019 a las 21:32
  • Lo que ocurre es que la nueva ruta /images/:id coincide en parte con la ruta anterior /images/, y te debe estar mostrando el componente UplodaImages justo después del contenido de Posters para evitar eso basta con que incluyas exact antes de path para que solo se muestre en el caso de coincidencia exacta. Commented el 17 ago. 2019 a las 9:58

1 respuesta 1

0

Debes agregar exact a tu ruta /images/:id y así no te choca con tu ruta /images/.

Aquí tienes la documentación que te puede ayudar

https://reactrouter.com/web/api/Route/exact-bool

Saludos

1
  • 2
    Cuando tengas suficiente reputación podrás hacer comentarios a las respuestas, por mientras revisa Como responder
    – rpaillao
    Commented el 19 ago. 2021 a las 14:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.