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

#reactjs #react-router

#reactjs #реагировать-маршрутизатор

Вопрос:

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

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

Ответ №1:

Это можно сделать двумя способами

Передать функцию из main дочернему элементу в качестве реквизита для извлечения идентификатора щелчка и загрузки данных просмотра соответственно
Следовательно, вы используете react router, вы могли бы добавить еще один маршрут

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

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

1. Также вы не хотели бы точно указывать этот путь. exact предназначен для статических путей, у которых нет дочерних элементов или параметров.

2. На самом деле использование мобильного устройства не позволяет отформатировать его, но сделает это в ближайшее время

3. Обведите код тильдой. Это на мобильных клавиатурах 🙂

4. @JoshuaUnderwood exact все равно будет работать, поскольку идентификатор может измениться, поэтому он не только соответствует статическому пути, вы можете проверить ссылку codepen, указанную в ответе

5. Большое спасибо, увидеть это в коде было очень полезно! Теперь у меня это работает

Ответ №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>

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

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

Например…

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

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

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

route="/season/spring" Не нуждается в exact, потому что у него нет дополнительных подпрограмм