React redux routing?

Question

[acorn]

Шалом гикам!
Есть поисковой запрос, в зависимости от запроса рендерит список фильмов с названием. Хочу сделать по клику на название изменения url нa '/card:id ' и отображение компонента 'Card ' с информацией о фильме. Сейчас у меня статический роутинг(react router4).
Не совсем понимаю как это сделать, помогите разобраться.

Answer 1

[Алексей Николаев]

Все довольно просто, выводите список ссылок вида /card/3, /card/1. В месте, где должна быть информация о фильме, вставляете Route с нужным path (в вашем случае, /card/:id) и вашим компонентом Card. В рендере компонента, который будет выводить этот Route, получаете ID через props.match.params.id.

Можете посмотреть код псевдосписка пользователей, где подобный роутинг реализован, только подгрузки реальных данных нет.

Роутинг пользователей

const App = () => (
    <Router>
        <Route path="/" component={props => {
            return (
                <>
                    <Switch>
                        <Route path="/users" component={Users} />
                    </Switch>

                    <div>
                        <Link to="/users/1">1</Link>
                        <Link to="/users/2">2</Link>
                        <Link to="/users/3">3</Link>
                    </div>
                </>
            )}
        } />
    </Router>
);

const Users = () => {
    return (
        <>
            <div>Users List</div>

            <Route path="/users/:page" render={props => (
                <Page {...props} />
            )} />
        </>
    )
}

const Page = (props) => {
    return <div>Page: {props.match.params.page}</div>;
}

Comments

[acorn]

спасибо!