Реагировать на установку маршрута в функции компонента без ссылки

Question

В моем приложении реагирования, когда я нажимаю «Добавить новую вкладку», я вызываю функцию «addNewproject».

<button onClick={() => this.addNewproject() }>Add New Tab</button>

В функции «addNewproject» новая вкладка добавляется в БД. Что мне нужно, это установить мой маршрут:

"? TabId = newTabID"

addNewproject = () => {
 //axios post happens and we get new Tabid just created in DB.
var newTabID= 623 //id from DB for ex.

//set here either like "?TabId=newTabID" and add to ROUTE
}

render() {
var newTabID = this.state.newTabId;
//OR add here "?TabId=newTabID" and add to ROUTE
}

Как я могу добавить его в URL? Я сослался на несколько статей, но все они сказали, что используют компонент, который вводит меня в заблуждение.

Answer 1

Попробуйте это:

  <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

import React, { Component } from 'react
import { withRouter } from 'react-router'

class RouteComp extends Component {
  navigate = () => {
    this.props.history.push({
      pathname: '/pathname',
      search: '?TabId=`${this.state.newTabId}'
    })
  }

  render () {
    <button onClick={this.navigate}>Navigate</button>
  }
}

export default withRouter(RouteComp);

Answer 2

То, что вы ищете, это history объект, который передается в качестве реквизита для компонентов, завернутых в Route в react-router.

Документация доступна здесь .

После добавления нового проекта пользователя следует перенаправить по истории, используя методы push или replace, например:

history.push(`${history.location.pathname}?TabId=${newTabID}`)