Как добавить параметр URL в текущий URL в React? - PullRequest
Новая
       18

Как добавить параметр URL в текущий URL в React?

0 голосов
/ 04 ноября 2019

Я в настоящее время нахожусь в компоненте Post и извлекаю данные через Fetch Api из маршрута "/ home". 

 componentDidMount() {
   fetch('/home')
     .then(res => res.json())
     .then((data)=> {
       console.log(data.ports)
       this.setState({ports: data.ports})
     })
     .catch(error =>console.log(error))
 }

Изменение ответа на данные json и установка состояния data.port_symbols. Но теперь я хочу использовать данные в состоянии в качестве параметра URL, поэтому я попробую следующий код. 

render() {   
return (
  <div>
    <h2>ports</h2> 
    <ul>
      {this.state.ports.map((port, index)=>          
         <li>
           <NavLink activeClassName='active-link' 
            to='/get_info/${port[0]}/${port[1]}'key={index}>
             {port[0]}/{port[1]}
           </NavLink>             
        </li>          
         )
      }   
    </ul>

Таким образом, вопрос в том, что {port[0]}/{port[1]} может быть передано в значение, которое хранится в состоянии, но ${port[0]}/${port[1]} не может быть передано в значение в URL, URL просто отображает $%7Bport[0]/$%7Bport[1]%7D%7D.

Может кто-нибудь помочь разобраться в чем проблема и помочь решить ее? Спасибо.

1 Ответ

2 голосов
/ 04 ноября 2019

Я думаю, вам просто нужно сделать строку шаблона: 

   <NavLink activeClassName='active-link' 
    to=`/get_info/${port[0]}/${port[1]}` key={index}>
     {port[0]}/{port[1]}
   </NavLink>

, обратная галочка "` "позволит вам использовать синтаксис ${variable}.

...