如何在反应路由器中从 app.js 访问组件参数

Question

我有一个反应应用程序，其中反应路由器在 App.js 中初始化。 当 url 为localhost:3000/id ，Home 组件将呈现给 App.js，但我需要从 App.js 获取id变量以运行initBusinessDetails()如何从 App 访问id变量.js。

App.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

访问匹配参数

在来自react-router-dom的component道具下渲染的component也会收到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
  }}
/>

现在，每当路由器重新渲染该路由时，这都会触发该功能，因此您可能需要在App和 axios 调用中添加逻辑输出以确保您只初始化一次。 如果您可以使用钩子，那么内联函数组件中的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
  }}
/>