Маршрутизатор Dynamic React с вкладками
У меня есть страница с таблицей, где вы нажимаете на <tr>, и пользователь перенаправляется на другую страницу, например:
// parent component
<tr onClick = {() => this.props.history.push(`users/${id}`)}>
На новой странице под названием пользователи есть две вкладки, которые также перенаправляют на другие страницы:
// users page receives the id from the parent
// component with this.props.history.push()
<Tab label='Users' key='users'>
<div>users page content</div>
</Tab>
// This page must also receive the id from parent component.
// The structure is similar to users page.
<Tab label='Info' key='info'>
<Redirect to = {'/info/:id'} />
</Tab>
Итак, мне нужно передать идентификатор с родительской страницы на [информационная страница/вкладка 2] и перенаправить с [информационной страницы/вкладки 2] на [пользователи/вкладка 1] по желанию с идентификатором от родителя, что-то вроде этого:
[tab 1]: users/12345
[tab 2]: info/12345
Как я могу достичь этого результата? Спасибо! :)
Ответы 1
Если вы определяете свои маршруты как
/users/:userId
/info/:userId
Вы можете прочитать идентификатор пользователя из параметров и использовать его для навигации между страницами.
<Tab label='Info' key='info'>
<Redirect to = {`/info/${this.match.params.userId}`} />
</Tab>
Вы можете написать <Redirect to = {'/info/:id'} /> там, где вам нужно написать <Redirect to = {`/info/${this.match.params.id}`} />
Сейчас это так: <Redirect to = {${routes.INFO}${this.props.match.params.id}} />, где route.INFO — это /info/:id
Если я уберу :id из /info/, URL-адрес будет выглядеть /info/12345, но я не увижу содержимое информационной страницы.
export const USERS = '/users/:id' export const INFO = '/info/' export const PARENT = '/parent'Я имел в виду, как вы настроили свою конфигурацию маршрута
<ProtectedRoute component = {ParentPage} exact path = {routes.PARENT} /> <ProtectedRoute component = {UserPage} exact path = {routes.USERS} /> <ProtectedRoute component = {InfoPage} exact path = {routes.INFO} />Изменение INFO на export const INFO = '/info/:id' будет рабочим провайдером, если вы не используете route.INFO в перенаправлении. Вместо редиректа напишите <Redirect to=`/info/${this.props.match.params.id}`} />
Как я уже говорил, я уже пробовал ваше решение, и появилась эта ссылка: info/:id12345. И вы правы, должно работать, но что-то не так :(
Давайте продолжить обсуждение в чате.
Я пробовал что-то подобное, но URL-адрес выглядит примерно так, почему:
info/:id12345. И затем, когда я перехожу от[info tab]к[users tab], URL-адрес выглядит такusers/:id:id12345