Реагировать - Как направить родительский div от дочернего div

Question

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

<Main>
    <titlebar>
    <Router>
        <Link to={"/home}>Home</Link>
        <Link to={"/search}>Search</Link>
        ...
    </Router>

    <Switch>
        <Route exact path="/" component={Home}
        <Route exact path="/search" component={Search} />
    <Switch>
    <footer>
</Main>

<Home>
    <Messages and stuff>
    ...
    <List />
    ...
<Home>

<List>
    list.map => (
        <button?>View</button>
        <thing.id>
        ...
    )
</List>

<View>
    ...info about thing ...
</View>

Моя цель состоит в том, чтобы иметь возможность нажимать на определенную кнопку внутри Списка и перенаправлять Main с сайта / на сайт / view {id}, аналогично тому, как нажатие на «поиск» в Main приведет к переходу на сайт / поиск. Я не хочу, чтобы View был внутри Home или List, я хочу, чтобы он был ребенком Main. Как бы я пошел по этому поводу? Передача функции, которая вручную переключается? Связать что-то где-нибудь? Я относительно новичок в React и роутерах, но ничего не нашел, когда просматривал документы.

Answer 1

Есть два способа сделать это

1. Для передачи функции от основного к дочернему в качестве реквизита для получения идентификатора нажатых и соответственно загрузки данных просмотра

2. Следовательно, вы используете реагирующий маршрутизатор, вы можете добавить еще один маршрут

Для получения более подробной информации см. Ссылку ниже.

[CodePen]  https://codepen.io/dwarka/pen/PLEMWX 

Answer 2

Добро пожаловать!

Вам потребуется маршрут, который будет выглядеть примерно так ...

<Route path="/view/:id" component={View} />

и ссылка типа

<Link to=/view/${thing.id}>Click me!</Link>

Обратите внимание на :id, который обозначает наличие переменной после view/

Затем в вашем View компоненте вы получите доступ к идентификатору через this.props.location

Если вы предпочитаете передать весь элемент списка, а не только его идентификатор (поскольку по какой-либо причине данные недоступны из компонента View ), вы также можете отправитьвесь элемент, например, так:

<Link to={{ pathname: '/view', state: thing }}>Click Me!</Link>

Затем в компоненте вида посмотрите на this.props.location.state

Также просто на голову, вам не нужно exact вмаршрут, если вы не планируете иметь вещи после косой черты .

Например ...

route="/" Требуется точно

route="/item" Требуется ли не точно

route="/season" Требуется точная причина, по которой у него есть подгруппы (пружина)

route="/season/spring" Нужно ли не точно, потому что у него нет подуровней