Как передать конкретный идентификатор пути маршрута?

Question

Я отправляю действие для редукции хранилища и пытаюсь получить идентификатор фильма из хранилища, но компонент Movie не отображается.Я предполагаю, что это неправильный подход к этому.Как правильно передать идентификатор фильма в путь маршрута?

основной компонент

render() {
return (
    <BrowserRouter>
        <div>
            <Route exact path="/" component={PopularList} />
            <Route path={`/${this.props.movieId`} component={Movie} /> 
        </div>
    </BrowserRouter>
)

}

компонент, с которого я хочу получить ссылку Ссылка на ={/${movie.id}}

render(){
if (this.props.popularMovies.length) {
        return (
            <section className={"movies"}>
                <h3>Popular Movies</h3>
                <h4>{this.props.popularMovies.length}</h4>
                <div className={"movies__block"}>
                    {
                        this.props.popularMovies.map((movie) => {
                            return (
                                <Link to={`/${movie.id}`} component={Movie} key={movie.id} onClick={() => {this.getMovieId(movie.id)}}>
                                    <div className={"movie-card"}>
                                        <div>{movie.title}</div>
                                        <img src={`${this.dbLink}${movie.poster_path}`}></img>
                                    </div>
                                </Link>
                            )
                        })
                    }
                </div>
            </section>
        )
    }
}

Answer 1

Если вы передаете параметр, вы можете использовать ссылку как:

<Route path='/route/:id' exact component={MyComponent} />

, а затем в MyComponent вы можете получить доступ с помощью:

const { id } = props.match.params;

В противном случае вы можете передать как:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

Затем получить к нему доступ:

const { foo } = props.location.state;