Как получить доступ к параметрам компонента из приложения. js в реагирующем маршрутизаторе

Question

У меня есть приложение реагирования, в котором инициализируется маршрутизатор реакции в приложении. js. Когда url равен localhost:3000/id, компонент Home отображается в приложении. js, но мне нужно получить переменную id из приложения. js, чтобы запустить initBusinessDetails(), как я могу получить доступ к id переменная из приложения. js.

Приложение. js код

import React from 'react'
import axios from 'axios';
import ReactLoading from 'react-loading';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getBusiness } from './actions/GetBusinessDetails';
import Home from './components/Home';
import Categories from './components/Categories';

class App extends React.Component {




  initBusinessDetails(){
    console.log(this.props)

    const { params } = this.props.match
    axios.get(`http://localhost:8081/getBusiness?businessId=`+params.id)
    .then(res => {
      this.props.getBusiness(res.data)
    })
  }

  componentDidMount(){
    this.initBusinessDetails();
  }

    render() {
        return (

           <div>
             {!this.props.business ?

                <div>
                  <ReactLoading type="bars" color="#000"/>
                </div>:
                <div>
                  <Router>
                    <Route exact path="/:id" component={Home}/>
                    <Route exact path="/:id/categories" component={Categories}/>
                    </Router>
                </div>
            }

          </div>
        )
      }
}

function mapStateToProps(state){
  return{
    business:state.business
  }
}

function matchDispatchToProps(dispatch){
  return bindActionCreators({getBusiness : getBusiness},dispatch)
}
export default connect(mapStateToProps,matchDispatchToProps)(App)

Answer 1

Доступ к параметрам совпадения

Компонент, визуализируемый по component из react-router-dom, также получает match проп.

У вас будет доступ к сопоставляемым объектам в разных местах:

• Компонент маршрута как this.props.match
• Визуализация маршрута как ( {match}) => ()
• Маршрутизировать дочерние элементы как ({match}) => ()
• withRouter как this.props.match
• matchPath в качестве возвращаемого значения

Для доступа к id с него:

initBusinessDetails() {
  const { params } = this.props.match;
  axios.get(`http://localhost:8081/getBusiness?businessId=${params.id}`)
    .then(res => {
      this.props.getBusiness(res.data)
    });
}

Но этот код находится за пределами моего маршрутизатора

сейчас этот код находится за пределами вашего маршрутизатора, поэтому вам необходимо отрисовать что-то внутри маршрутизатора, которое может вызвать эту функцию. Это легко, поскольку вы все еще используете Router, поэтому все сопоставленные маршруты отображаются ( В отличие от Switch, который возвращает только первый сопоставленный маршрут ). Рендеринг другого маршрута со встроенным функциональным компонентом. Можно было бы делать и на основе классов, но для работы потребовалась бы настройка. Дайте мне знать, если это так.

<Route
  exact
  path="/:id"
  component={({ match }) => {
    // add any logic here to do anything when this component is 
    // mounted/rendered, like call `initBusinessDetails` with 
    // the `id` param
    return null; // return nothing to the UI
  }}
/>

Теперь, это будет запускать эту функцию всякий раз, когда маршрутизатор повторяет этот маршрут, поэтому вам может понадобиться добавить logi c в App и ваш топор ios вызов, чтобы убедиться, что вы инициализируете только один раз. Если вы можете использовать хуки, то хук useEffect прямо во встроенном функциональном компоненте сделает свое дело.

initBusinessDetails(id) {
  axios.get(`http://localhost:8081/getBusiness?businessId=${id}`)
    .then(res => {
      this.props.getBusiness(res.data)
    });
}

...

<Route
  exact
  path="/:id"
  component={({ match }) => {
    useEffect(
      () => initBusinessDetails(match.params.id),
      [] // call only once when mounted
    );
    return null; // return nothing to the UI
  }}
/>