I have a Link with a path to to = {/movies/${id}}
but it takes me to the not found page ; Why is this?... I'm using a template with backticks , they just don't show up, I don't know why.
Clicking on the button link takes me to the not found route instead of taking me to the form where the movies are uploaded.
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;
Here are my routes:
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>
);
}
Inside the render I had to write this code to make it work:
As you can see, the difference is that you had to write
_id
instead of destructuringid
the object .