I'm trying to make a movie website with react and there's a search movie page that when the user search a movie, a bunch of movies based on the user search query will appear and when that movie is clicked it will redirect to the movie detail page
Here's the search movie page:
The problem here is when I click the movie it redirects to "/search/movie/(id)" instead of just "/movie/(id)". Because of that it will lead me to a blank page because there's no component assigned in "/search/movie/(id)".
Here's the code for the movie item:
function MovieCard(props){ return( <NavLink to={`movie/${props.id}`} end> <div className="movie-card"> <img src={props.imgLink} width='250px' height='300px' alt={props.title}/> <p>{props.title}</p> <p>{props.releaseDate}</p> <p>{props.rating}<img src="star-icon2.png" width='18px' height='18px'/></p> <button className="add-to-my-list-button">Add to my list</button> </div> </NavLink> ) } And here's the routing code:
function Main() { return ( <BrowserRouter> <Navbar webName={'MovieStash'}/> <Routes> <Route exact path="/" element={<Home/>}/> <Route path="/watchedmovies" element={<WatchedMovie/>}/> <Route path="/search" element={<Search/>}/> <Route path="/movie/:id" element={<MovieData/>}/> </Routes> </BrowserRouter> ) } I tried to modify the routing code to assign the movie detail page to the "/search/movie(id)" path with this code:
function Main() { return ( <BrowserRouter> <Navbar webName={'MovieStash'}/> <Routes> <Route exact path="/" element={<Home/>}/> <Route path="/watchedmovies" element={<WatchedMovie/>}/> <Route path="/search" element={<Search/>}/> <Route path="/search/movie/:id" element={<MovieData/>}/> (the line of code i add as my temporary solution) <Route path="/movie/:id" element={<MovieData/>}/> </Routes> </BrowserRouter> ) } Do you guys have any solution on how to make the searched movies redirects to "/movie/(id)" instead of "/search/movie/(id)" so that I can remove the line of code I add as my temporary solution?
