Question

在我的App.js文件中，我渲染了所有路线，我有这段代码：

import LiveMatch from "../containers/LiveMatch";

const routes = [
  //removed other routes for simplicity of post
  {
    path: "/livematch/:matchid", <--- here is the param I want
    exact: true,
    component: () => <LiveMatch />
  }
];

class App extends Component {

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            {routes.map((route, index) =>
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.component}
              />
            )}
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

现在我已经设置了组件，我尝试打印出：matchid参数，但我不断得到一个空对象。

class LiveMatch extends Component {
  constructor(props) {
    super(props)
    this.state = {...}

    console.log(this.props) // returns { }
  }

  componentDidMount() {
     console.log(this.props) // returns { }
  }

}

我是否尝试在构造函数中访问道具或者在安装道具后始终为空。我从其他帖子中搜索到的答案显然应该像this.props.params.matchid或this.props.match.params.matchid一样简单。

问题：如何访问：matchid param。我做错什么了吗？

Answer 1

为什么在LiveMatch组件中没有它？

因为您没有将默认道具（表示路由器传递给组件的道具）传递给LiveMatch组件。您正在覆盖道具值。

解决方案是，使用箭头功能接收道具并向下传递到组件中它将起作用。

像这样写：

component: (props) => <LiveMatch {...props}/>

或删除箭头功能：

component: LiveMatch

React Router params返回空对象

1 个答案: