Question

我有一个React App，其中React-router在App.js中初始化。当url为localhost:3000/id时，将Home组件呈现给App.js，但是我需要从App.js中获取id变量以运行initBusinessDetails()，我该如何访问App.js中的id变量。

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

访问匹配参数

在component的{{1}}道具下渲染的组件也将收到match道具。

您将可以在各个地方匹配对象：

将组件作为this.props.match

将渲染路径设置为（{match}）=>（）

将孩子作为（{match}）=>（）

将路由器作为this.props.match

matchPath作为返回值

要从中访问react-router-dom：

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 }} />和axios调用中添加逻辑以确保仅初始化一次。如果可以使用钩子，那么直接在内联功能组件中使用App钩子就可以解决问题。

useEffect

如何在React Router中从app.js访问组件参数

1 个答案: