React router nested, open new page as soon as there are params

Question

Currently building with create-react-app and I'm trying to get dynamic routing. I have a site with 3 pages: Accordion, Movies, MovieDetail.

Page Movie is a page with a list of fetched movies from swapi. The goal is to open a new page as soon as you click on a movie title. The new page should give you more info about the clicked movie.

The problem: The MovieDetail page will render the information on the same page of Movies. Not on a new page..

the code: Index.tsx

const routing = (
    <Router>
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/movies">Movies</Link>
                    </li>
                </ul>
            </nav>

            <Switch>
            <Route exact={true} path="/" component={App} />
            <Route path="/movies" component={Movies} />
            <Route exact={true} path="/movies/:id" component={MovieDetail} />
            <Route component={NotFound} />
            </Switch>
        </div>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Movies.tsx:

import React from 'react';
import { Route, useParams, Link, Switch } from 'react-router-dom';
import { useMovies } from './api/useMovies';
import { MovieDetail } from './MovieDetail';

export const Movies = () => {
    let { id } = useParams();
    const movies = useMovies();

    return (
        <div>
            <h1>Movies</h1>
            <h2>Selected movie: {id}</h2>
            <h2>Select a movie:</h2>
            {movies &&
                (
                    <ul>
                        {console.log(movies)}
                        {movies.results.map((movie, index) => {
                            return (
                                <li key={index}>
                                    <Link to={`/movies/${index + 1}`}>{movie.title}</Link>
                                </li>
                            );
                        })
                        }
                    </ul>
                )
            }
            <Switch>
                <Route path="/movies/:id" component={MovieDetail} />
            </Switch>
        </div>
    );
};

MovieDetail.tsx:

import React from 'react';

export const MovieDetail = () => {

    return (
            <h1>Movie Title</h1>
    );
};

score 2 · Accepted Answer · answered Jan 10 '20 at 13:31

You need add exact to your Movie route

<Switch>
    <Route exact={true} path="/" component={App} />
    <Route exact={true} path="/movies" component={Movies} />
    <Route exact={true} path="/movies/:id" component={MovieDetail} />
    <Route component={NotFound} />
</Switch>

or move the /movies route makes more sense

<Switch>
    <Route exact={true} path="/" component={App} />
    <Route exact={true} path="/movies/:id" component={MovieDetail} />
    <Route path="/movies" component={Movies} />
    <Route component={NotFound} />
</Switch>

Wow thanks! This solved the problem! It didn't work with just adding 'exact'. By moving /movies below /movies/:id it worked. Even if you delete exact. So exact isn't even necessary. — Rowin_nb2, Jan 10 '20 at 14:09

score 0 · Answer 2 · answered Jan 10 '20 at 13:12

0

add exact to your "Movie" route

here is answer

since your sublink with movie/1 will match just move route

answered Jan 10 '20 at 13:12

Juraj Kocan

2,648
1
15
23

exact didn't do it, I had to move ``` ``` below: ``` ``` – Rowin_nb2 Jan 10 '20 at 14:12

React router nested, open new page as soon as there are params

2 Answers2