Ссылка меняющая URL, но не страница - PullRequest
Новая
       30

Ссылка меняющая URL, но не страница

0 голосов
/ 25 сентября 2019

Я использую хлебные крошки Ant design.Я пытаюсь изменить страницу, используя ссылку и нажимая URL, я вижу изменение URL, но страница не меняется.

Я попытался использовать Link, затем создал функцию для onClick, но все просто изменило URL. 

Route: 
<Route exact path="/assistant/:wId/skill/xyz/:sid" component={ xyz } />

Tried process 1: 

<Breadcrumb separator=">">
 <Breadcrumb.Item 
     onClick={this.redirectToParam2}>   
     {param2}
 </Breadcrumb.Item>
</Breadcrumb>

redirectToParam2 = () => {            
     this.props.history.push(`/assistant/${wId}/skill/xyz/${sId}`);
 }

Tried process 2:

<Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>

Даже я пытался без компонента «Хлебные крошки», но он по-прежнему не меняет страницу.

Я хочу, чтобы страница менялась при изменении URL-адреса.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Проблема, с которой вы сталкиваетесь, заключается в том, что при изменении параметров, используемых в качестве реквизитов для компонента xyz , компонент не заменяется, а получает новые свойства.Поскольку ничего не меняется, я предполагаю, что у вас есть состояние, которое заполняется в конструкторе или ComponentWillMount / ComponentDidMount .

Компоненты класса Reactдля этого есть функция жизненного цикла: componentDidUpdate.

componentDidUpdate () вызывается сразу после обновления.Этот метод не вызывается для начального рендеринга.

Используйте его как возможность работать с DOM, когда компонент был обновлен.Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не понадобиться, если реквизиты не изменились).

Цитата с реактивных документов, см .: https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
  if ((this.props.params.match.sid !== prevProps.params.match.sid) || 
      (this.props.params.match.wid !== prevProps.params.match.wid)) {
    this.populateState(this.props.params.match); //fill your state
  }
}
0 голосов
/ 25 сентября 2019

Попробуйте, 

import { Link } from "react-router-dom";



 <Breadcrumb separator=">">
   <Breadcrumb.Item>    
     <Link to= {`/assistant/${wId}/skill/xyz/${sId}`}>
     {param2}
     </Link>
  </Breadcrumb.Item>
</Breadcrumb>
...